html - 使用带有 nowrap 的 inline-block 时，子 div 超出父 div

Question

.containerdiv{
white-space: nowrap;
}

.childdiv{
display : inline-block;
}

<div class="containerdiv">
   <div id="child1" class="childdiv"></div>
   <div id="child2" class="childdiv></div>
</div>

我不希望孩子 div 包装。因此创建了上面的css。

在 div“child1”中，我指定了在不同位置变化的宽度。为了防止 div child2 超出容器，我想在 child2 中指定最大宽度。IE。不超过父 div。（我无法计算和输入）我怎么能做到这一点。我可以看到现在 div child2 比父容器要消失。如何防止这种情况？

请帮忙。提前致谢。

Answer 1

如果你想让它非常开心，你可以做 inline-block 并希望最好。

但是如果内容太宽，它可能只会将 inline-block 推到下一行

解决方案

#containerdiv {overflow:auto;}/*the clear fix*/
#containerdiv>div {float:left; width:50%;}

在那里，它们都占据了容器的 50%，并且溢出自动清除修复了它。

你可以用 50% 做 inline-block 但你需要破坏水平空白。

<div><div></div></div>

这是有效的，因为它们之间没有空格

<div>
<div></div><!--
--><div></div>
</div>

这是有效的，因为注释删除了空格。