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
}