把所有的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连续排列

回答

相关问题