CSS宽度:不应该自动全长

我的问题是当我做width:autodiv时全长,但我只想让它去它里面的div的宽度.

HTML:

21.09






1.99






12.12

CSS:

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

当我检查元素时,它向我显示:

这意味着宽度不覆盖在中的3个div .vidswraper.

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

这是块的默认行为,它们希望填充所有可用空间.

相反,似乎你想要缩小到适合算法.

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

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容器中,它将成为弹性项目,因此(默认情况下)不会增长以填充可用空间.