Question

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

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

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

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

Answer 1

您需要在您的孩子display: table;上提及div，并在您的孩子display: table-cell;上提及div。我在jsfiddle上发布了示例代码..

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

Fiddle

Answer 2

所以你想要一个固定边距但动态宽度？这需要更多的标记，除非你愿意通过使用flexbox来放弃对IE9及以下版本的支持。

问题是，您不能将100％分成百分比并修复值（动态宽度，修复边距）就像那样。（有使用calc()的方法..但是如果你打算使用calc，你也可以使用flexbox。

注意：子元素的宽度不完全相同。不会有（非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 3

请检查：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% ;
}

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

3 个答案: