CSS width:在不应该的情况下自动变长 [英] CSS width:auto going full length 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中的3个div.

which means that the width is not covering the 3 divs that are in the .vidswraper.

注意:侧面的div是float:left;，宽度是width:110px.

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

推荐答案

这是块的默认行为，它们要填充所有可用空间.

This is the default behavior of blocks, they want to fill all available space.

相反，您似乎希望缩小-fit算法.

有几种方法可以做到这一点:

There are several ways to achieve this:

• display: table

请注意，这具有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 width:在不应该的情况下自动变长的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！