CSS宽度：自动进行全长不应该 [英] CSS width:auto going full lenght when not supposed to

问题描述

我的问题是当我做 width：auto div变成全长，但我只想要它的内部的div的宽度。

My problem is when I do width:auto the div goes full length but I only want it to go the width of the divs that are inside it.

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;
}

当我检查元素它显示我：

When I do inspect element it shows me this:

这意味着宽度不覆盖 .vidswraper

注意：边上的div是 float：left; ，宽度是 width：110px

NOTE: the divs in side are float:left; and the width is width:110px

推荐答案

这是块的默认行为，

相反，您似乎想要缩小到拟合算法。

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

There are several ways to achieve this:

• display：table

注意这有一个表内部显示布局模型，如果内容是表格元素，这可能是有问题的。

Note this has a table inner display layout model, which may be problematic if the contents are tabular elements. Otherwise they will be wrapped in an anonymous table cell.

display：inline-block

这会产生一个内联级别的框而不是一个块的问题。如果您有其中几个，则可以水平堆叠，而不是垂直堆叠。

This has the problem that produces an inline-level box instead of a block one. If you have several of they, they may be stacked horizontally instead of vertically.

display：inline-table ， display：inline-flex ， display：inline-grid

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

These have the same problem as display: inline-block. Additionally, they have an inner display role layout model which is neither flow nor flow-root, this can be problematic.

float：left

有盒子被流出的问题。您可能需要使用clearfix或让父母建立一个块格式化上下文以解决这个问题。

This has the problem that the box is taken out of flow. You may need to use clearfix or make the parent to establish a block formatting context in order to solve this.

此外，一堆浮动元素将水平堆叠。

Additionally, a bunch of floated elements will be stacked horizontally. Use clearance to prevent that.

width：fit-content

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

You may also be interested in width: max-content or width: min-content. But, together with width: fit-content, they may not be widely supported yet.

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

Alternatively, you could try placing your element in an special layout model. For example, if you place it in a flex container, it will become a flex item and thus (by default) won't grow to fill available space.

这篇关于CSS宽度：自动进行全长不应该的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！