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;
}
如何将这些部分排成一行并居中?
最佳答案
我希望这就是您想要的: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
}
关于html - 如何在一行中制作部分?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7399002/