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

Question

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

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

当我调整浏览器大小以更改父元素的宽度时，会发生一些事情：“3个元素靠在一起”。

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

- MmD

Answer 1

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

问题在于，您不能将100％分成百分比和固定值（动态宽度，固定边距）。 （有使用calc（）的方法...但如果您要使用calc，则也可以改用flexboxes。

注意：子元素的宽度不完全相同。 没有（非弹性框架，非计算）方法可以实现此目的。

这里是一个示例(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;
}

- MildlySerious

Answer 2

请查看：http://jsfiddle.net/3F5WQ/4/

只使用float:left;，并使用百分比设置宽度。

#mom{
    width: 100%;        
}

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

- JunM

Answer 3

您需要在父级 div 上添加 display: table;，并在子级 div 上添加 display: table-cell;。我在 jsfiddle 上发布了一个示例代码。请参考：

   #mom
    {
        display: table;
        width: 100%;
    }
    .baby
    {
        display: table-cell;
        color: red;
        background: #333333;
    }

Fiddle

- Karuppiah RK

---

也，妈妈需要 width: 100%。更新的 fiddle - MildlySerious

@MildlyInteresting：我正在尝试更新我的代码片段，所以更新答案并附上解释需要一些时间。 - Karuppiah RK

大家好，我想让三个子div在同一行上，并且它们之间有20像素的左右边距。 - MmD

@mamal10，将边距设置为20像素与将边距设置为自动是完全不同的。你必须做出决定。 - npst

我的朋友，我希望这三个子元素一起有margin-right和margin-left，例如20px。你的代码没问题，但是三个元素之间没有距离！！！ - MmD

Answer 4

将 <div class="mom"> 改为 <div class="d-flex">，就这样。不需要为子 div 添加类来定位。

- Muhammad Bilal