-2

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

在此处输入图像描述

4

2 回答 2

2

使用真棒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-16T19:41:26.573 回答
1

你需要使用花车

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

于 2013-10-16T19:41:34.843 回答