html - CSS 宽度 :auto going full length when not supposed to

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

这是 block 的默认行为，它们想要填充所有可用空间。

相反，您似乎想要 shrink-to-fit algorithm .

有几种方法可以实现这一点:

• 显示:表格

  请注意，它有一个 table 内部显示布局模型，如果内容是表格元素，这可能会出现问题。否则它们将被包裹在一个匿名表格单元格中。

• 显示:内联 block

  这会产生行内级框而不是 block 级框的问题。如果您有多个，它们可能会水平堆叠而不是垂直堆叠。

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

  这些与 display: inline-block 有同样的问题。此外，它们有一个既不是flow 也不是flow-root 的内部显示 Angular 色布局模型，这可能会有问题。

• float :左

  这有盒子被带出流的问题。您可能需要使用 clearfix 或让父级建立 block 格式化上下文来解决此问题。

  此外，一堆 float 元素将水平堆叠。使用间隙来防止这种情况。

• 宽度:适合内容

您可能还对 width: max-content 或 width: min-content 感兴趣。但是，与 width: fit-content 一起，它们可能尚未得到广泛支持。

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