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％，每个文本元素的间距相等。 PS。如果这更容易，我可以使用spans作为内部元素。

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

请参阅此fiddle

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

Answer 2

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

有些属性显然是在this fiddle上清楚地标记它们。

DIV水平自动边距，内跨/ div

2 个答案: