水平放置容器？ （最簡單的方法？）CSS

Question

水平對齊容器的最佳方式是什麼？因爲我真的不想創建3個獨立的div容器......舉個例子：我基本上想要三個盒子/容器在我的網頁中間水平排列。

Answer 1

HTML：

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

CSS：

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

OR：

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

Demonstration

您可以使用float或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/