将所有div放在一行

Question

您如何将所有这些<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>

Answer 1

使用真棒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>

Answer 2

你需要使用花车

给这四个内部div一个类，然后使用css float: left