5

私はこのコードを持っています

HTML:
<div id="table">
    <div class="table-cell"></div>
    <div class="table-cell"></div>
    <div class="table-cell"></div>
    <div class="table-cell"></div>
    <div class="table-cell"></div>
    <div class="table-cell"></div>
    <div class="table-cell"></div>
    <div class="table-cell"></div>
</div>

CSS:
#table {
    display: table;
    width: 940px;
    table-layout: fixed;
}
.table-cell {
    display: table-cell;
    overflow: hidden;
    width: 220px;
    height: 282px;
    padding: 9px 10px;
}

4 が追加されるたびに、ブラウザーがテーブルセルをラップするようにすることは可能ですか? 4 つのテーブルセルごとに新しい行を作成することを意味します。

ありがとう！

PS 行のセルには 4 つの場所しかありません。

4

1 に答える 1

3

CSS:

#table {
    display: table;
    width: 940px;
    table-layout: fixed;
}
.table-row
{display:table-row;}

.table-cell {
    display: table-cell;
    overflow: hidden;
    width: 220px;
    height: 282px;
    padding: 9px 10px;
}

html:

<div id="table">
    <div class="table-row" >
        <div class="table-cell">1</div>
        <div class="table-cell">2</div>
        <div class="table-cell">3</div>
        <div class="table-cell">4</div>
    </div>
    <div class="table-row" >
        <div class="table-cell">1a</div>
        <div class="table-cell">2a</div>
        <div class="table-cell">3a</div>
        <div class="table-cell">4a</div>
    </div>
</div>

あなたは自動的に必要だと言います：

css を次のように変更できます。

#table {
    display: table;
    width: 960px !important;
    table-layout: fixed;
}
.table-cell {
    float: left;
    display: table-cell;
    overflow: hidden;
    width: 220px;
    height: 282px;
    padding: 9px 10px;
}
于 2012-11-27T22:31:21.917 に答える