如何在一行中創建節？

Question

HTML：

<section id="grid"> 
    <aside class="grid"> 
     <img class="img" src="i/img.jpg" /> 
     <p></p> 
    </aside> 
    <aside class="grid"> 
     <img class="img" src="i/img.jpg" /> 
     <p></p> 
    </aside> 
    <aside class="grid"> 
     <img class="img" src="i/img.jpg" /> 
     <p></p> 
    </aside>  
</section> 

CSS：

#grid{ 
    margin:50px 0 0 10px; 
    width:100%; 
    text-align:center; 
} 
.grid{ 
    margin-left:20px; 
    margin:0 auto; 
    width:300px;  
} 

如何把這個部分在一行並居中？

Answer 1

我希望這是你想要的東西：http://jsfiddle.net/thirtydot/ypce8/

我的答案是複雜得多，它可能是以下兩個原因：

• 我假設項目的數量是不固定的。
• 我包括對IE6/7的支持（假設你已經使用html5shiv或類似的）。

#grid { 
    margin: 50px 0 0 10px; 
    width: 100%; 
    text-align: center; 
    zoom: 1; 
    border: 1px dashed #f0f 
} 
.grid { 
    border: 1px solid red; 
    margin-left: 16px; 
    width: 300px; 
    vertical-align: top; 
    display: inline-block; 
    /*if you need ie6/7 support*/ 
    *display: inline; 
    zoom: 1 
} 
.grid:first-child { 
    margin-left: 0 
} 
.grid img { 
    display: block 
} 

Answer 2

可能是容器所需

#grid{ 
    margin:50px 0 0 10px; 
    width:100%; 
    text-align:center; 
    border:1px solid red; 
} 

.container { 
    width:906px; 
    margin:0 auto; 
    border:1px solid green; 
} 

.grid{ 
    margin-left:20px; 
    margin:0 auto; 
    width:300px; 
    float:left; 
    border:1px solid blue; 
} 

<section id="grid"> 
    <div class="container"> 
    <aside class="grid"> 
     <img class="img" src="i/img.jpg" /> 
     <p></p> 
    </aside> 
    <aside class="grid"> 
     <img class="img" src="i/img.jpg" /> 
     <p></p> 
    </aside> 
    <aside class="grid"> 
     <img class="img" src="i/img.jpg" /> 
     <p></p> 
    </aside> 
    </div> 
</section>