CSS宽度：不应该自动全长

Question

我的问题是，当width:auto div完全长度但是我只想要它的内部div的宽度。

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：

.vidwraper {
   margin: 0 auto;
   width: auto;
   height: 110px;
}

当我检查元素时它会向我显示：

表示宽度未覆盖.vidswraper中的3个div。

注意：侧面的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一起，它们可能还没有被广泛支持。

或者，您可以尝试将元素放在特殊的布局模型中。例如，如果将它放在flex容器中，它将成为一个flex项，因此（默认情况下）不会增长以填充可用空间。

Answer 2

Div是块级元素。这意味着它们默认为全宽。如果你不想要它们的全宽，你必须给你的div一个明确的宽度。

Answer 3

width:auto实际上意味着：＆＃34;浏览器决定宽度＆＃34; 。

对于默认display设置为block的任何DOM元素，width:auto被转换为父内容区域宽度的100％