如何将 3 个元素放在父 div 中的一行中？

Question

我已将 3 个 div 元素放入另一个 div 元素中，如下所示：

<div id="mom">
    <div class="baby"></div>
    <div class="baby"></div>
    <div class="baby"></div>
</div>

当调整浏览器大小以使父级的宽度发生变化时，会发生一些情况：“3 个元素靠近在一起。”

我无法自动设置左右边距。

Answer 1

那么您想要固定边距但动态宽度吗？这需要更多的标记，除非您愿意通过使用 Flexbox 来放弃对 IE9 及更低版本的支持。

问题是，你不能像那样将 100% 拆分为百分比和固定值（动态宽度、固定边距）。（有多种使用calc().. 的方法，但如果你要使用 calc，你也可以使用 flexboxes。

注意：子元素的宽度不完全相同。不会有（非 Flexbox、非 calc）方法来实现这一点。

这是一个示例 ( jsFiddle )，带有更多标记，但 IE8 和 9 支持。

HTML：

<div class="mom">
    <div class="child">
        <div class="childinner">Lorem ipsum dolor.</div>
    </div>
    <div class="child">
        <div class="childinner">Amet laborum cupiditate.</div>
    </div>
    <div class="child">
        <div class="childinner">Ratione maxime et!</div>
    </div>
</div>

CSS：

.mom {
    width: 100%; /* Try setting this to 400px or something */
    display: table;
    border: 1px solid #444444;
}
.child {
    display: table-cell;
}
.childinner {
    margin-left: 25px;
    /* Decorative .. */
    background-color: #cccccc;
    min-height: 40px;
}
.child:first-child .childinner {
    margin-left: 0;
}

Answer 2

检查这个： http: //jsfiddle.net/3F5WQ/4/

仅用于宽度的使用float:left;和使用。percentage

#mom{
    width: 100%;        
}

.baby{ 
    text-align: center;
    float: left;
    position: relative;
    width: 26.67%; 
    margin-left: 5% ;
}