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。

是否可以根据每行的数量调整大小（可能是明确的css？）内部div？因此，在示例中，第一行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
}

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

1 个答案: