css - すべての div を一列に並べる

Question

<div>これらすべてのs をどのように並べますか?

  <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

フロートを使用する必要があります

この 4 つの内部 div にクラスを指定してから、css を使用しますfloat: left