Question

我想构建一些包含一些sub_div的弹出窗口。问题是当我在弹出窗口中调整窗口大小时留一些空白。我在这里举了一个例子：

    <div id="all">
        <div id="sub_all"></div>
        <div id="sub_all"></div>
        <div id="sub_all"></div>
        <div id="sub_all"></div>
        <div id="sub_all"></div>
    </div>

#all {
    background:#ccc;
    width: auto;  
    display:table;

}

#sub_all {
    background:#ff0000;
    float:left;
    margin-left:10px;
    margin-bottom:5px;
    width:30px;
    height:30px;

}

所以当你调整到较小的尺寸时，＆＃34; #all div＆＃34;中有时会有很大的空白空间。我该如何解决这个问题？

Answer 1

当您为父div使用表格布局时，您应该使用display：table-cell作为子div。对于任何数量的孩子，这将默认为您提供相等的间距。

请在此处查看jsFiddle：http://jsfiddle.net/83gdw0uq/

HTML：

<div id="all">
    <div class="sub_all"></div>
    <div class="sub_all"></div>
    <div class="sub_all"></div>
    <div class="sub_all"></div>
    <div class="sub_all"></div>
    <div class="sub_all"></div>
    <div class="sub_all"></div>
</div>

CSS：

#all {
    background:#ccc;
    width: 100%;  
    display:table;
    border-spacing: 10px 5px;   /*first parameter is horizontal spacing / second is vertical spacing*/
}

.sub_all {
    background:#ff0000;
    display:table-cell;
    height:30px;
}

根据子div调整div

1 个答案: