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>

如何在一行中制作章节？

2 个答案: