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
}