html/css - 创建自扩展动态 div

Question

我有示例 div 结构:

<div id="outer" style="width:600">
<div class="inner"></div> <!--row1-->
<div class="inner"></div>
<div class="inner"></div><br/>
<div class="inner"></div> <!--row2-->
<div class="inner"></div>
</div>

外部 div 具有固定宽度。内部 div 是动态生成的，因此每行可能有 1、2、3 等 div。

是否可以根据每行的数量调整内部 div 的大小(也许在清晰的 css 中？)？因此，在示例中，第一行 div 的宽度为 200px，第二行的宽度为 300px。

Answer 1

您可以使用 display: table-cell 来做到这一点。浏览器支持:http://caniuse.com/css-table

参见: http://jsfiddle.net/thirtydot/x5ZFg/

HTML: (与您的问题略有不同)

<div id="outer">
    <div class="innerWrap"> <!--row1-->
        <div class="inner"></div>
        <div class="inner"></div>
        <div class="inner"></div>
    </div>
    <div class="innerWrap"> <!--row2-->
        <div class="inner"></div>
        <div class="inner"></div>
    </div>
</div>

CSS:

#outer {
    width: 600px
}
.innerWrap {
    width: 100%;
    display: table;
    table-layout: fixed
}
.inner {
    display: table-cell;
    height: 50px;
    border: 1px dashed #f0f
}