中心容器，並使寬度等於其浮動內容

這應該是一個基本的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。當我將瀏覽器窗口的大小調整爲小於832像素寬度時，.items跳轉至適合連續放置3個。

如何居中#container中的3項，或使#container寬度等於其浮動內容的寬度和中心#container在#main？

mockup

來源

2012-07-10 Dave Kiss

你可以發佈一個簡單的草圖或圖表，你想佈局看起來像什麼？ – 2012-07-10 21:30:16

當然，只是更新了問題。 – 2012-07-10 21:53:17

我相信這或多或少是你想要什麼：

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！）

來源

2012-07-10 21:34:07

這很接近，但我不能有項目之間的差距（這就是爲什麼我浮動在我的例子中） – 2012-07-10 21:47:37

@DaveKiss：在HTML中，刪除'div's之間的空白。 – thirtydot 2012-07-10 22:01:37

對，@thirtydot！ @Dave Kiss，看看新的小提琴：http://jsfiddle.net/L3JVe/17/ – 2012-07-10 22:22:12

中心容器，並使寬度等於其浮動內容

回答

相關問題