1

是否可以在具有固定列数（例如 4）的容器内分配动态数量的单元格。我想做的是：

<div class="container_4">
    <div class="cell">Cell 1</div>
    <div class="cell">Cell 2</div>
    <div class="cell">Cell 3</div>
    <div class="cell">Cell 4</div>
    <div class="cell">Cell 5</div>
    <div class="cell">Cell 6</div>
    <div class="cell">Cell 7</div>
</div>

在不指定每 4 个单元格后行结束的位置的情况下，这应该如下所示：

Cell 1    Cell 2    Cell 3    Cell 4
Cell 5    Cell 6    Cell 7
4

2 回答 2

4

如果我做对了，这可能对你有用：

#container_4 {
    width: 400px; /* Change to your container width */
}

.cell {
    width: 25%; /* Use different percentages for a different number of columns */
    float: left;
}

然后，如果您需要单元格上的边距，请进行数学运算，例如：

.cell {
    width: 23%; /* 1/4 the container width - margin x 2 */
    margin: 1%; /* Your margin */
    float: left;
}

或者使用 CSS3 属性box-sizing并用填充来给你的盒子边距：

.cell {
    width: 25%;
    padding: 1%;
    float: left;
    /* This will make the specified with include padding's and borders */
    box-sizing: border-box; /* Standard syntax */
    -moz-box-sizing: border-box; /* Firefox */
    -webkit-box-sizing: border-box; /* Safari */
}

注意：该box-sizing属性不适用于ie7。在 quirks 模式下，ie6默认使用 " border-box" 模型（有关 ie6 盒子模型错误的更多信息，请参见此处）。

于 2012-12-26T16:22:44.270 回答
1

CSS

.container_4{
width:480px;
height:160px;
background:#EFEFEF;
}

.cell{
border:solid 1px #999;
float:left;
height:58px;
margin-left:10px;
margin-top:10px;
width:98px;
background-color:White;
}

在这里演示

于 2012-12-26T16:37:50.940 回答