2

動的な数の div があるコンテナーがあります。各 div の幅が同じになるように、折り返しなしですべての div を 1 行に収めたいと思います。div の数と画面のサイズの両方を変更できます。私はcssソリューションを望んでいます。

このフィドルでは、灰色のボックスが 3 つの同じサイズの赤、緑、青の四角形で満たされている必要があります。

私はこれを無駄にしようとしました。

#container {
    width: 400px;
    border: 2px solid #CCCCCC;
}

#container div {
    width: auto;
    display: inline-block;
    height: 200px;
}

ご協力いただきありがとうございます。

4

2 に答える 2

7

HTML 仕切りをテーブル セットのように動作させます。表の仕切り ( <td>) は、デフォルトで均等に広がるようになっています。

HTML

<div class="table-div" style="width:100%">
    <div class="tr-div">
        <div class="td-div">td-div 1a</div>
        <div class="td-div">td-div 2a</div>
        <div class="td-div">td-div 3a</div>
        <div class="td-div">td-div 3b</div>
    </div>
    <div class="tr-div">
        <div class="td-div">td-div 1b</div>
        <div class="td-div">td-div 2b</div>
        <div class="td-div">td-div 3b</div>
        <div class="td-div">td-div 3b</div>
    </div>
</div>

CSS

.table-div{display:table} /* you can add table-layout:fixed; to suit your needs ([Yoshi][1])*/
.tr-div{display:table-row}
.td-div{display:table-cell;border:1px solid silver}

http://jsfiddle.net/sPm9M/を参照してください

于 2013-08-28T19:58:50.563 に答える
0

私の理解が正しければ、コンテナーのサイズに関係なく、div の幅をすべて同じにして、すべてのコンテナーを満たしたいですか?

この場合、簡単です。コンテナに含める div の数で 100 を割って、各 div の適切なパーセンテージ幅を取得します。

ここ： http://jsfiddle.net/XnC6k/3/

于 2013-08-28T20:15:37.127 に答える