css - 具有内部跨度/ div 的 DIV 水平自动边距

Question

我正在尝试做的事情如此简单，但我的大脑今天拒绝运作！

<div id="outer">
    <div class="inner">TEXT 1</div>
    <div class="inner">TEXT 2</div>
    <div class="inner">TEXT 3</div>
</div>

视觉上应该是这样的：

|---------------------------------------------------|
|    TEXT 1          TEXT 2            TEXT 3       |
|---------------------------------------------------|

其中 .outer 是 100% 宽度，每个文本元素在其中等距分布。附言。如果这更容易，我可以将跨度用于内部元素。

Answer 1

只需应用这个 CSS

#outer{
   width:100%;
   display:inline-block;
   border:1px solid #CCC;
}
.inner{
    float:left;
    width:29%;
    text-align:Center;
    border:1px solid green;
}

看到这个小提琴

另外，请注意，单个内部 div 的宽度之和必须小于外部的总宽度，那么只有它们才会出现浮动

Answer 2

#outer {
    display: inline-block;
    width: 100%;
}
.inner {
    float: left;
    width: 30%;
    margin: 5px;
    background-color: red;
}

有些属性显然是要在这把小提琴上标明的。