这应该是一个基本的CSS问题,但我们都知道有时它可能是一种棘手的语言。
<div id="main">
<div id="container">
<div class="item">
<div class="item">
<div class="item">
<div class="item">
<div class="item">
<div class="item">
</div>
</div>
#main {clear: both; margin: 20px auto; max-width: 100%; width: 1000px;}
#container {clear: both; margin: 0 auto; max-width: 832px;}
.item {width: 208px; float: left;}
默认情况下,连续有4个.items
。当我将浏览器窗口的大小调整为小于832px宽时,.items
会跳转到适合3行。
如何将#container
中的3个项目居中,或使#container
宽度等于其浮动内容的宽度,并将#container
置于#main
的中心?
答案 0 :(得分:2)
我相信这或多或少是你想要的:
这是一个简单的修复。我将您的.item
设置为display:inline-block;
,将#container
设置为text-align:center;
。
你的新CSS看起来像这样:
#main {
clear: both;
margin: 20px auto;
max-width: 100%;
width: 1000px;
}
#container {
clear: both;
margin: 0 auto;
max-width: 832px;
text-align:center; /*New*/
}
.item {
width: 208px; /*May need to adjust*/
display:inline-block; /*New*/
}
此外,您需要删除HTML中项目之间的所有空格,以避免在呈现的项目之间出现空格。 (谢谢,@ thirtydot!)