CSS使用div來模擬表

我是新的webdesigner，我必須創建一個有3列的頁面的一部分：左側的菜單，中央機構和垂直橫幅。我不能用表，所以我創建了一個類似HTML：CSS使用div來模擬表

<div class="Body"> 
    <div class="LeftMenu">My menu</div> 
    <div class="Content">Foo body</div> 
    <div class="VerticalBanner">My menu</div> 
</div>

雖然CSS：

.LeftMenu { 
width: 20%; 
} 
.Content { 
margin: auto; 
left: 20%; 
position: absolute; 
top: 0px; 
width: 60%; 
} 
.VerticalBanner { 
left: 80%; 
margin: auto; 
position: absolute; 
top: 0%; 
width: 20%; 
}

所以，使用代碼我的問題是父DIV（車身）需要第一個div（LeftMenu）的高度，這不是更大。這導致「內容」和「VerticalBanner」的內容流出「正文」，並在頁腳div下。如果我使用float屬性，則「Body」div無尺寸摺疊，然後頁腳div在「Body」內的三列下滑動。

我也嘗試過顯示屬性，但Internet Explorer不支持這一點，有些列有奇怪的行爲。

這樣做的正確方法是什麼？

來源

2011-07-19 IssamTP

只是爲了澄清，你沒有使用DIV而不是TABLE，因爲你不應該以這種方式考慮使用TABLE。 TABLE的含義並不與一個網站的部分並排競爭。這是佈局的一部分，即DIV的含義。當我們從一開始就在語義上思考時，我們避免了這種「不正確」的比較。只是爲了幫助你，因爲你已經開始... –

有一個很好的[浮法教程]（http://css.maxdesign.com.au/floatutorial/），第9課聽起來很像你的案件。也許你可以檢查它？ – bottlenecked

看看[Here]（http://www.cssplay.co.uk/layouts/three-column-layouts.html）和[Here]（http://matthewjamestaylor.com/blog/perfect-3-column熱媒）。關於如何實現純CSS跨瀏覽器3列布局 – Rdpi

我認爲你應該爲你的DIV使用浮點數。之後移動它們變得更容易。

來源

2011-07-19 12:44:55 Warface

使用display: table-*：

.Body { display: table; } 
.Left, .Content, .VerticalBanner { display: table-cell; }

見例如this JSfiddle。

來源

2011-07-19 12:54:15 You

要崩潰，您可以使用

.body{ overflow: hidden; }

我不認爲你需要的絕對位置停止身體股利。

來源

2011-07-19 12:54:56 jcrain

-1

<div class="Body"> 
    <div style="width:20%;float:left;">My menu</div> 
    <div style="width:60%;float:left;">Foo body</div> 
    <div style="width:20%;float:left;">My menu</div> 
    <div style="height:1px;font-size:1px;clear:both;">&nbsp;</div> 
</div>

來源

2011-07-19 12:56:13 StefanNch

-1清除'div'有很好的指導。那些已經[很長時間不必要]（http://www.quirksmode.org/css/clearing.html）。 – You

哦... +1的鏈接，然後...更清潔！ – StefanNch

我也在考慮清理。感謝您的鏈接@You。 – Kraz

CSS使用div來模擬表

回答

相關問題