html - 如何在一行中制作部分？

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
}