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

说我有以下内容：

<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中间隔相等？

我不得不强烈反对其他答案,建议使用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>