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では機能しません。クァークズモードの場合、ie6はdefaulによる " 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 に答える