html - 任意の数の div を水平に並べて、ページ全体の幅を均等に分割するにはどうすればよいですか?

Question

任意の数の div をラッパー div に水平に並べて配置し、ラップされた div の幅を固定せずにページ幅全体を埋めるようにするにはどうすればよいですか(テーブル幅を 100% に設定したときの html テーブル列の動作とまったく同じです)。

そして、可能な限りクロスブラウザ...

ありがとう

Answer 1

これはうまくいくようです。jquery を使用しているため、可能な限りクロス ブラウザーに対応しています。

http://jsfiddle.net/AmnsD/

ああ、SOはjsfiddleへのリンクだけを許可していません:だからここに例があります:

<style>
.inner1{background-color:#FF0000;float:left;height:25px;}
.inner2{background-color:#00FF00;float:left;height:25px;}
.inner3{background-color:#0000FF;float:left;height:25px;}
.inner4{background-color:#FFFF00;float:left;height:25px;}
</style>

<script>
$(document).ready(function(){
    $('#outer').children().each(function(index){
        $(this).css('width',100/$('#outer').children().length + '%');
    });
});​
</script>

<div id="outer">
    <div class="inner1">
        &nbsp;
    </div>
    <div class="inner2">
        &nbsp;
    </div>
    <div class="inner3">
        &nbsp;
    </div>
    <div class="inner4">
        &nbsp;
    </div>
</div>

Answer 2

少しチートですが、次のように display:table-cell を使用して実行できます。

<style type="text/css" media="screen">
    body {
        margin:0;
        padding:0;
    }

    #wrap {
        background:black;
        display:table;
        padding:10px 0;
        width:100%;
    }
    .box {
        height:100px;
        display:table-cell;
    }

    .a {
        background:red;
    }

    .b {
        background:blue;
    }

    .c {
        background:green;
    }

    .d {
        background:yellow;
    }
 </style>

そしてHTMLはそうです。

<div id="wrap">
    <div class="box a">a</div>
    <div class="box b">b</div>
    <div class="box c">c</div>
    <div class="box d">d</div>
</div>

Answer 3

あなたの問題は、レスポンシブ Web デザインとメディア クエリを使用して解決されます。

Answer 4

これはあなたが探しているものかもしれないと思います: http://umaar.github.com/css-flexbox-demo/

編集: これは現在、非常にクロス ブラウザーでホバーです (ie9 では機能しません)。