中心容器并使宽度等于其浮动内容

时间:2012-07-10 21:20:00

标签: html css css-float

这应该是一个基本的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的中心?

mockup

1 个答案:

答案 0 :(得分:2)

我相信这或多或少是你想要的:

http://jsfiddle.net/L3JVe/17/

这是一个简单的修复。我将您的.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!)