6

<div>いくつかのボタンを含むコンテナがあるとしましょう:

<div class="cont">
    <div class="button">Button 1</div>
    <div class="button">Button 2</div>
    <div class="button">Button 3</div>
    <div class="button">Button 4</div>
    <div style="clear:both"></div>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

そしてこれにいくつかのCSSを割り当てました：

.cont{
    background:#0F0;
    width:400px;
    height:40px;
    line-height:40px;
}
.button{
    background:#F00;
    float:left;
    height:inherit;
    line-height:inherit;
}

背景色は、自分が何をしているかを確認するためのものです。<div>JavaScript を使用せずにすべてのボタンを親に引き伸ばす (幅が等しい)方法があるかどうか疑問に思ってい<div>ます<div>。はい、.button幅を 25% に設定できます。ボタンが 4 つあるためですが、さらにボタンを追加すると、新しい幅を自動的に取得する必要があります。

私は自分自身を十分に説明したことを願っています.周りを見回しましたが、これに合うものは見つかりませんでした. CSSでこれを行うことはできますか、それともJSジョブですか?

ここでJSFiddle。

ありがとう。

4

3 に答える 3

24

display: table;とで行うことができますdisplay: table-cell;

テーブルに付随する悪い意味合いは知っていますが、テーブル マークアップを使用しておらず、div のactようなテーブルを作成しているだけです。

ここでデモを見る

<div class="cont">
    <div class="button">Button 1</div>
    <div class="button">Button 2</div>
    <div class="button">Button 3</div>
    <div class="button">Button 4</div>
</div>​

.cont{
    background:#0F0;
    width:400px;
    height:40px;
    line-height:40px;
    display: table;
}
.button{
    background:#F00;
    display: table-cell;
}
​
于 2012-11-23T16:22:16.820 に答える
2

これは、CSSフレキシブル ボックス モデルの完璧な使用例です。

HTML5 Rocksには、これに関する優れた紹介があります。

これにはベンダー プレフィックスが必要で、古いブラウザーではサポートされていません。古いブラウザ用のポリフィルであるFlexieがあります。

于 2012-11-23T16:28:28.457 に答える