DIV佈局問題

我有一個div容器，其中將包含3周或更多的divDIV佈局問題

<div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
</div>

現在，我希望把div的爲

[container-div] 
    [1st div]  [2nd div]  [3rd div] 
    [4th div]  [5th div] 
[/container-div]

如何實現以下？

感謝

來源

2010-12-08 I-M-JM

爲什麼不用表來代替？ – Mudassir 2010-12-08 11:37:54

對於您所遇到的問題，表格看起來足夠合理。 – 2010-12-08 11:38:52

如果你總是希望3周的div在一排，你可以添加一個類他們和他們的風格是這樣的：如果你想有利潤

.float { 
    float: left; 
    width: 33%; 
}

你應該也譜寫他們％並從寬度減去邊距。

來源

2010-12-08 11:39:19 Tim

有沒有什麼辦法可以修復主容器div的寬度，這樣它就不會在任何情況下擴展？ – 2010-12-08 11:57:59

<style type="text/css"> 
#one,#two,#three,#four,#five{ 
float:left; 
} 

.clearfix{ 
clear:both; 
} 

</style> 

<div id="container"> 
    <div id="one"></div> 
    <div id="two"></div> 
    <div id="three"></div> 
    <div class="clearfix"></div> 
    <div id="four"></div> 
    <div id="five"></div> 
</div>

只是嘗試它，我能想到的

來源

2010-12-08 11:40:38

三種方式。

首先，你可以使用float設置它們的位置（style ='float：left/right'）。但是，這會導致它們溢出包含div，除非您使用明確的另一個div跟蹤它們：兩者都是（<div style='clear:both'></div>），如Anish所示。

其次，您可以使用表格或顯示屬性表格，表格行和表格單元格。 e.g：

<div style='display:table'> 
    <div style='display:table-row'> 
    <div style='display:table-cell'>div 1</div> 
    <div style='display:table-cell'>div 2</div> 
    <div style='display:table-cell'>div 3</div> 
    </div> 
</div>

最後，可以使用顯示屬性內聯塊，這在div的端移除斷行，同時允許你保持固定的寬度。例如：

<div style='display:inline-block;width:33%'>div 1</div> 
<div style='display:inline-block;width:33%'>div 2</div> 
<div style='display:inline-block;width:33%'>div 3</div> 
<br /> 
<div style='display:inline-block;width:33%'>div 4</div> 
<div style='display:inline-block;width:33%'>div 5</div>

來源

2010-12-08 11:46:24 Benubird

回答

相關問題