Div實際自動寬度

我有一個div，基本上是一個float: left更小的div。我希望整個網格具有自動寬度，並且它將相對於其容器居中。 display: inline-block到網格+ text-align: center到容器不會產生所需的結果。看來，一旦使用多個div填充網格以創建新行，網格的寬度會最大化爲容器寬度，即使較小的div不完全適合該行，並且右側仍有一些空白區域。Div實際自動寬度

解決方案是什麼？ enter image description here

來源

2012-09-08 user1639431

你能在一些混合正確格式化？ – Grixxly

我想你需要在容器上指定一個寬度。 –

爲什麼float您的較小div s在第一位？在它們上使用display: inline-block;時，您可以在對中時獲得更多控制權，並且還可以通過執行display: inline-block;以使容器width'自動'。這是一個小工作演示：little link。

這裏的基本輪廓，HTML：

<div class = "container"> 
    <div class = "floatcontainer"> 
     <img src = "" alt = "" class = "floatimg"/> 
     <img src = "" alt = "" class = "floatimg"/> 
     <img src = "" alt = "" class = "floatimg"/> 
     <br/> 
     <img src = "" alt = "" class = "floatimg"/> 
     <img src = "" alt = "" class = "floatimg"/> 
     <img src = "" alt = "" class = "floatimg"/> 
    </div> 
</div>

CSS：

.container { 
    width: 100%; 
    text-align: center; 
} 
.floatimg { 
    width: 100px; 
    display: inline-block; 
    margin: 15px; 
} 
.floatcontainer { 
    display: inline-block; /*makes the div's width only as large as needed*/ 
    text-align: center; 
}

希望這有助於！

來源

2012-09-08 15:43:30 Chris

我在想每行應該只有3格，很難從描述中看出來。 – tsergium

@tsergium那麼，可以通過添加'white-space：nowrap;'強制每行有3個'div'。我希望@ user1639431能清楚地說明他心中的想法。 – Chris

你應該在這裏使用表格，但如果不是這樣的話，試試這個fiddle我所做的。

HTML

<!DOCTYPE html>

演示

CSS

.container{ 
    margin: 10px; 
    padding: 10px; 
    border: 1px solid #000; 
} 
.item{ 
     height: 10px; 
     margin-top: 10px; 
     margin-right: 2%; 
     width: 32%; 
     float: left; 
     background-color: #dfdfdf; 
    } 
    .mr0{ 
     margin-right: 0; 
    } 
    .clear{ 
     clear: both; 
    }

來源

2012-09-08 15:49:45 tsergium

我不認爲''div在你的演示中居中，它們只有32％的寬度。 – Chris

簡簡單單就和使用

div.big { 
width:100%; 
} 
div.small { 
    width:33.33% 
}

來源

2016-08-26 12:15:22 Daut

Div實際自動寬度

回答

相關問題