使用絕對定位而不是花車定位列

我已經閱讀了幾篇關於網站內容模板的文章。他們似乎都建議通過浮動將這些列放置在您的網站上。例如：使用絕對定位而不是花車定位列

<div id="container" style="width: 1000px;"> 
    <div id="main_content" style="border: solid 1px Black; width: 798px; /* width = 800px -2px for border */ float: left; height: 400px;" ></div> 
    <div id="links_menu" style="border: solid 1px Black; width: 198px; float: right; height: 600px;"></div>  
</div>

但是，我總是設法每當我用花車來裂傷我的內容。我花更多的時間去嘗試確定我的<div syle="clear:both;" />的位置，而不是實際設計網站的外觀和感覺。此外，無論何時我將第三方ComponentArt控件中的一個放置在浮動容器中，它都會變形並需要我指定高度和寬度，這些高度和寬度在運行時間之前不會確定。

此外，我發現當我使用絕對定位時，事情似乎對我來說效果更好。例如：

<div style="width: 1000px; height: 600px; position: relative;"> 
    <div style="border: solid 1px Black; width: 798px; position: absolute; top: 0; left: 0; height: 400px;"></div> 
    <div style="border: solid 1px Black; width: 198px; position: absolute; top: 0; right: 0; height: 600px;"></div> 
</div>

不管怎麼說，我還是比較新的樣式和HTML，所以我想有這個扔出來給你一切，看你怎麼想這個替代的內容放置。你看到這種方法有什麼不利嗎？我已經在大多數瀏覽器中嘗試過了，它們似乎都可以正確渲染，但我不知道未來會如何...或者，也許有人可以推薦更好的方法來浮動我的容器，以便內部內容不會作爲好。我絕對樂於接受建議，並感謝您提供的任何反饋。

在此先感謝您的幫助！

CJAM

來源

2009-02-09 regex

絕對定位的容器的一個大問題是，當你不知道自己的高度提前時，將內容放置在它們下面的頁面上。在你的例子中，你已經定義了絕對定位元素的高度，所以這對你來說應該不成問題。如果它適合你，請使用它。

來源

2009-02-09 17:36:36

用css實現某些東西真的沒有對與錯。它更多的是有效性/靈活性。

對列布局使用絕對位置會降低該值。插入，刪除列需要重新計算所有的定位。如果有多個相同樣式的列的實例呢？由於絕對定位，我們不能重複使用樣式100％。

有很多方法來列布局。退房一些@ listapart, positioniseverything

來源

2009-02-09 18:02:05 Jason

使用絕對定位而不是花車定位列

回答

相關問題