佈局這就是我想我的頁面看起來像:需要幫助建立與資料覈實
Mockup http://img64.imageshack.us/img64/5974/pagedh.jpg
我還沒有應用。下面是我在哪裏: http://labs.pieterdedecker.be/test/test.htm
我很新的使用<div>
秒(而不是<table>
S)創建我的頁面的佈局。我如何完成這項工作?
佈局這就是我想我的頁面看起來像:需要幫助建立與資料覈實
Mockup http://img64.imageshack.us/img64/5974/pagedh.jpg
我還沒有應用。下面是我在哪裏: http://labs.pieterdedecker.be/test/test.htm
我很新的使用<div>
秒(而不是<table>
S)創建我的頁面的佈局。我如何完成這項工作?
您可以只需添加2 CSS樣式規則修復菜單:
.menu { overflow: hidden; }
.menu ul { margin: 0; }
溢出會離開,因爲瀏覽器默認<ul>
保證金的更高的菜單,只需用第二式的清理它,這將打破邊緣。
只需添加以下代碼:
<div style="clear:both; margin-left:20px;">
行後:
<div id="body">
即:
<div id="body">
<div style="clear:both;">
更多信息有關clear財產。
而且,看看很好的教程:
現在我看到的問題是,你的藍「項目」框不看的權利。我認爲這是因爲包含'item'框的div應該包含在主'body'框中。它實際上是'身體'格內的第一件事。
爲了讓你更容易,你應該在'body'div中創建一個div,使用width: 100%
和background: blue
(或者任何顏色)。然後,在該div內,您可以創建項目列表。
將「物品」放入「物品欄」內的顯而易見的方法是將float:left
中的所有物品放在其自己的div內。那麼您需要爲「項目欄」本身(如height: 2em
)設置一個靜態高度,因爲只包含浮動元素的div沒有高度。
嘗試包括明確:在身體div。
<div id="body" style="clear: both">
<p>This is my body</p>
</div>
祝你好運! ;-)
固定身體/菜單重疊。謝謝。 – Pieter 2010-04-17 11:12:56
菜單欄背景現在橫跨頁面容器。謝謝!但是爲什麼設置溢出隱藏導致DIV被拉伸?我只在上下文中使用溢出,如果它們不完全適合元素,我必須切斷文本。 – Pieter 2010-04-17 11:17:15
@Pieter - 這是替代清算元素的替代方法。它強制「溢出」的元素,以適應浮動兒童的高度計算是所有。這裏有一個完整的閱讀,如果你想要更多的信息:http://www.quirksmode.org/css/clearing.html – 2010-04-17 11:23:36