如何在div中使多个跨距等宽

Question

说我有以下内容:

<div style="border: 1px solid black; width:300px;">
<span style="background: red; width:100px;">one</span>
<span style="background: yellow; width:100px;">two</span>
<span style="background: red; width:100px;">three</span>
</div>

我可以应用什么CSS来使div在div中间隔相等？

Answer 1

我不得不强烈反对其他答案,建议inline-block并且float:left这些解决方案将为您提供浮动布局.这在大多数情况下可能都很好,我见过33.33%+ 33.33%+ 33.33%> 100%的情况,通常在Android设备上.这会将最后一个单元格推到下一行.

由于您尝试创建表格外观,我建议使用表格显示样式:

<style>
    #myTable {
        display: table;
        border: 1px solid black;
        width: 300px;
    }

    #myTable > * {
        display: table-cell;
        width: 33.33%;
    }
</style>
<div id="myTable">
    <span style="background: red">one</span>
    <span style="background: yellow">two</span>
    <span style="background: red">three</span>
</div>