11

今の私の設定はこんな感じです

<div class="container">
    <div class="child">AAAAA</div>
    <div class="child">BB</div>
    <div class="child">CCCCCCCCC</div>
    <div class="child">D</div>
</div>

.container {
    width: 100%;
    border: 1px solid black;
    display: inline-block;
}
.child {
    border: 1px solid grey;
    display: inline-block;
}

http://jsfiddle.net/T2478/

クラス「子」を持つすべてのdivを広げて、クラス「コンテナ」でdivの幅全体を埋めたいですか?

おそらくかなり簡単な解決策です。私はhtmlとcssにかなり慣れていません

「コンテナ」の幅に関係なく、子が均等に広がるようにするにはどうすればよいですか?

ありがとう！

4

5 に答える 5

23

この回答のように、テーブル レイアウトの動作をエミュレートする必要があります。

これには、実際の要素と子要素の使用は含まれません。これには、プロパティ<table>の特定の値、つまりおよびを使用して、テーブルのレイアウト動作をエミュレートすることが含まれます。純粋なレイアウトに実際のテーブル マークアップを使用したくないのは、意味的に正しくなく、眉をひそめているからです。コンテンツがテーブルに属する実際の表形式のデータである場合、 actual を使用することは完全に理にかなっています。それがあなたが望むものである可能性が高いので、ここではテーブル以外の方法を紹介します。displaytabletable-cell<table>

のように動作させるにdiv.containerは、要素にプロパティが必要です。また、すべての子要素を等間隔にするために、値を持つルールも必要になります。次に、要素を表のセルのように機能させる必要があります。ブラウザーは、子要素の等間隔レイアウトを自動的に計算するようになりました。ブラウザが計算するため、子要素のルールはもう必要ない/必要ないことに注意してください。コンテナ要素には何らかの幅が必要です。そうしないと、テーブルがコンテンツと同じ大きさに折りたたまれてしまいます。コンテンツの幅が、計算された等間隔の寸法よりも大きい場合、コンテンツが子要素からオーバーフローする可能性があることに注意してください。display: table;<table>table-layoutfixeddiv.childdisplay: table-cell;width

最終的なコードは以下で、ここにフィドルがあります。

HTML:

<div class="container">
    <div class="child">AAAAA</div>
    <div class="child">BB</div>
    <div class="child">CCCCCCCCC</div>
    <div class="child">D</div>
    <div class="child">E</div>
    <div class="child">E</div>
    <div class="child">E</div>
</div>

CSS:

.container {
    width: 100%;
    border: 1px solid black;
    display: table;
    table-layout: fixed;
}
.child {
    border: 1px solid grey;
    display: table-cell;
}

また、 についての無関係なメモdisplay: inline-block;。インラインブロック要素間のすべての空白をレンダリングします（これは、元のフィドルの子要素間の間隔として表示できます）。これは正常であり、仕様に従っていますが、望ましくない場合もあります。これを回避する方法については、こちらを参照してください。

于 2013-11-12T05:44:59.203 に答える
0

これを試して

.container {
    width: 100%;
    border: 1px solid black;
    display: inline-block;
}
.child {
    border: 1px solid grey;
    display: block;
}

フィドル

于 2013-11-12T05:24:00.383 に答える