css - コンテナーを水平方向に整列しますか? (最も簡単な方法?) CSS

Question

コンテナを水平方向に整列させる最良の方法は何ですか? 3 つの個別の div コンテナーを作成したくないので... 例: 基本的に、Web ページの中央に 3 つのボックス/コンテナーを水平方向に並べて配置したいだけです。

Answer 1

HTML：

<div class="float"></div>
<div class="float"></div>
<div class="float"></div>

CSS：

.float {
    width:33.33%;
    height:400px;
    float:left;
}

また：

.float {
    width:33.33%;
    height:400px;
    display:inline-block;
}

デモンストレーション

floatORプロパティを使用displayして、それらを水平方向に整列させることができます。

Answer 2

<div class="container">
    <div class="float"></div>
    <div class="float"></div>
    <div class="float"></div>
</div>

#container {
    text-align: center;
}

.float {
    display:inline-block;
    text-align: left;

    width:100px;
    height:400px;        
    background:green;
    margin:5px;
}

デモ: http://jsfiddle.net/ts9BB/3/