CSS寬度：自動去滿足長度時不應該

Question

我的問題是當我做width:auto div變長，但我只希望它的寬度內的divs。

HTML：

<div class="vidswraper"> 
<div> 
<div class="videoimage"> 
<img src="images/icon1.jpg" height="100" width="100"> 
<p class="price">21.09</p> 
</div> 
</div> 

<div> 
<div class="videoimage"> 
<img src="images/icon2.jpg" height="100" width="100"> 
<p class="price">1.99</p> 
</div> 
</div> 

<div> 
<div class="videoimage"> 
<img src="images/logo.jpg" height="100" width="100"> 
<p class="price">12.12</p> 
</div> 
</div> 

CSS：

​​

當我做檢查元素它表明我：

這意味着寬度沒有覆蓋3周的div是在.vidswraper

注意：側面的div是float:left;，寬度是width:110px

Answer 1

這是塊的默認行爲，它們要填充所有可用空間。

相反，它似乎你想shrink-to-fit algorithm。

有幾種方法來實現這一點：

• display: table

  注意這具有table內顯示的佈局模型中，如果內容是片狀元件，其可以是有問題的。否則，它們將被包裹在匿名錶格單元格中。

• display: inline-block

  這具有產生一個行內框代替一個塊中的一個的問題。如果你有幾個，他們可能是水平疊加而不是垂直疊加。

• display: inline-table，display: inline-flex，display: inline-grid

  這些有同樣的問題display: inline-block。此外，他們有一個內部顯示角色佈局模型既不是flow也不是flow-root，這可能會有問題。

• float: left

  這有一個箱子取出流的問題。您可能需要使用clearfix或使父級建立塊格式化上下文才能解決此問題。

  此外，一堆浮動元素將水平堆疊。使用間隙來防止這種情況。

• width: fit-content

您還可能有興趣在width: max-content或width: min-content。但是，與width: fit-content一起，它們可能尚未得到廣泛支持。

或者，您可以嘗試將您的元素放置在特殊的佈局模型中。例如，如果將它放置在一個彈性容器中，它將成爲一個彈性項目，因此（默認情況下）不會增長以填充可用空間。

Answer 2

Div是塊級元素。這意味着它們默認爲全角。如果你不需要它們的全寬，你必須給你的div一個明確的寬度。

Answer 3

width:auto實際上是指：「瀏覽器決定寬度」。

對於具有默認display設置爲block任何DOM元素，width:auto被轉換到父的內容區域100％寬度。