把所有的div連續排列

-2

你會如何把所有這些<div> s排成一排？把所有的div連續排列

<div style="background-color: aquamarine; margin:50px"> 
     <div style="background-color: azure;width:25%;"> 
      1 
     </div> 
     <div style="background-color: darkolivegreen;width:25%;"> 
      2 
     </div> 
     <div style="background-color: darkorange;width:25%;"> 
      3 
     </div> 
     <div style="background-color: bisque;width:25%;"> 
      4 
     </div> 
    </div>

enter image description here

來源

2013-10-16 user1799345

使用真棒display:table。

<div style="background-color: aquamarine; margin:50px; display:table"> 
    <div style="background-color: azure;width:25%;display:table-cell"> 
     1 
    </div> 
    <div style="background-color: darkolivegreen;width:25%;display:table-cell"> 
     2 
    </div> 
    <div style="background-color: darkorange;width:25%;display:table-cell"> 
     3 
    </div> 
    <div style="background-color: bisque;width:25%;display:table-cell"> 
     4 
    </div> 
</div>

事實上，你甚至不需要指定內部div的寬度。使用table-layout:fixed，瀏覽器將自動計算寬度並很好地佈置。 :) 一定要在父div上指定一個寬度。

<div style="background-color: aquamarine; margin:50px; width:100%; display:table; table-layout:fixed"> 
    <div style="background-color: azure;display:table-cell"> 
     1 
    </div> 
    <div style="background-color: darkolivegreen;display:table-cell"> 
     2 
    </div> 
    <div style="background-color: darkorange;display:table-cell"> 
     3 
    </div> 
    <div style="background-color: bisque;display:table-cell"> 
     4 
    </div> 
</div>

來源

2013-10-16 19:41:26

偉大的代碼。謝謝苛刻 – user1799345

不客氣！ –

你需要使用花車

給這四個內部的div一類，然後使用CSS float: left

來源

2013-10-16 19:41:34 user934902

只需添加float：left將不會執行此操作。此外，您還必須爲父div指定明確的高度，或者清除浮動，否則父項將崩潰。 –

把所有的div連續排列

回答

相關問題