html如何定义包装块,html - 内联块元素换行时，父包装器不适合新宽度的CSS

如果内容因屏幕宽度而断行，如何获取inline-block元素以适合其内容宽度？

我想不出如何表达这个问题，听起来似乎很简单，但是我整理了一个简单的JSFiddle说明。

#wide {

position: relative;

width: 100%;

border: 1px solid black;

padding: 5px;

}

#narrow {

position: relative;

width: 175px;

border: 1px solid black;

padding: 5px;

}

.wrap {

display: inline-block;

border: 1px solid green;

margin: auto;

}

.inlineblock {

display: inline-block;

vertical-align: top;

background: red;

min-width: 100px;

min-height: 100px;

border: 1px solid black;

}

When the red inline-blocks are forced to line break, how do you make a parent with display:inline-block (the green border) snap to fit? How do you get rid of all the extra horiztonal space in the lower green bordered div?

最佳答案

你不能默认情况下，inline-block元素具有shrink-to-fit width：

收缩至配合宽度为：

min(max(preferred minimum width, available width), preferred width)。

然后，

当您选择preferred minimum width <= preferred width <= available width时，宽度将为preferred width。

当您选择available width <= preferred minimum width <= preferred width时，宽度将为preferred minimum width。

如果为preferred minimum width <= available width <= preferred width，则宽度为available width，即使您不喜欢它也是如此。

如果您确实不希望这样做，我想您可以使用JS添加resize事件侦听器，然后手动设置所需的宽度。