如何在div内使多个跨度等于宽度 [英] How can I make multiple spans equal width within a 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内的间距相等?

What CSS can I apply to make the spans equally spaced within the div?

推荐答案

我不得不强烈不同意其他答案，建议将 inline-block 和 float:left 设置为这些解决方案将为您提供浮动布局.在大多数情况下，这可能很好，我已经看到了33.33％+ 33.33％+ 33.33％> 100％的情况，通常是在Android设备上.这会将最后一个单元格推到下一行.

I have to strongly disagree with the other answers, suggesting inline-block and float:left as these solutions will give you a floating layout. This may be fine most of the time, I have seen cases where 33.33% + 33.33% + 33.33% > 100%, usually on Android devices. This pushes the last cell onto the next line.

由于您尝试创建表格外观，因此建议您使用表格显示样式:

Since you are trying to create a tabular appearance, I would recommend using tabular display styles:

<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>

这篇关于如何在div内使多个跨度等于宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！