16

したがって、1 つの div 内に 3 つの div があります。

<div class="parent">
<div class="child> Text</div>
<div class="child">Text</div>
<div class="child">Text</div>
</div>

子divが親の幅を埋めるようにします(子の合計幅が親になる必要があります)。しかし、これは起こっていません。私は不足しています。これは、子 div がコンテンツに基づいて幅を設定しているためだと思います。

どうすれば欲しいものを達成できますか?

CSS-

.child {
    background: white;
    color: #a7a9ac;
    cursor: pointer;
    font-size: 15px;
    border-right: 1px;
    border-top: 0;
    border-bottom: 0;
    border-left: 0;
    border-style: solid;
    border-color: @faded-grey;
    padding-right: 10px;
    margin: 0 auto;
    height: 100%;
}

.parent {
    border-top: 1px;
    border-left: 0;
    border-bottom: 1;
    border-style: solid;
    border-color: @faded-grey;
    border-right: 0;
    width: 100%;
    margin-right: 0px;
    height: 80px;

}
4

4 に答える 4

13

常に 3 つの子が存在することがわかっている場合は、次のように簡単に使用できます。

.parent > .child {
    float: left;
    width: 33%;
}

.parent {
    overflow: auto; /*or whatever float wrapping technique you want to use*/
}

子の数がわからない場合は、CSS テーブル、フレックスボックスを使用するか、インライン ブロックと text-align: justify を組み合わせる必要があります。

于 2013-07-19T23:48:48.713 に答える
7

ソリューションが完全に反応するようにするには、要素数の変動に対応する必要がありました。

これに対する興味深い解決策を発見しました。基本的に表のように表示されます。すべての要素が利用可能な幅を共有し、これは画像でも非常にうまく機能します: http://jsfiddle.net/8Qa72/6/

.table {
    display: table;
    width: 400px;
}

.table .row {
    display: table-row;
}

.table .row .cell {
    display: table-cell;
    padding: 5px;
}

.table .row .cell .contents {
    background: #444;
    width: 100%;
    height: 75px;
}
于 2014-04-18T15:57:07.343 に答える