Css Container Div Size

Question

我有一个问题是在强制其子div向下移动时让DIV调整大小以适应内容。

我在示例中尝试做的是将容器div的宽度设置为子容器的宽度，这样我就可以将容器放在页面的中心位置。

HTML

<div id="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

CSS

body {
    text-align: center;
}
#container {
    text-align: left;
    border: 1px solid red;
    display: inline-block;
    padding:0;
    margin:0;
    /* for ie6/7: */
    *display: inline;
}
.box{
    width: 100px;
    height: 100px;
    border: 1px solid blue;
    display:inline-block;
}

当您查看示例时，容器正在扩展到100％，同时在最右边的子容器和容器之间留出空间。 http://jsfiddle.net/rjY7F/594/

Answer 1

#container {display:table;}
.box {display:table-cell; float:none; vertical-align:top;}

然后将.box样式的宽度设置为100px，并将#container的宽度设置为组合宽度。

Answer 2

我会在容器上使用显示表，添加100％的宽度以保持布局大小。在框中使用display table-cell，

这是代码：

#container {
text-align: left;
border: 1px solid red;
display: table;
padding:0;
margin:0;
width:100%;
}
.box {
display:table-cell;
height:100px;
border:1px solid blue;
}

http://jsfiddle.net/rjY7F/603/

Answer 3

  在这种情况下，

Flexbox可能会有所帮助

要制作弹箱环境，您必须首先将父元素（在您的情况下为container）设置为display:flex。

对于flex-items，您可以设置min-width，但我建议您也查看flexbox提供的所有功能......