html - 为什么会溢出: hidden not working on my div?

Question

如果您尝试将 margin-left 提供给 C1 div，它会移动并 overflow hidden 。但是，如果您尝试将 margin-left 赋予 C2 div，它会向右移动，但不会 overflow hidden ，而是移到下一行(inline-block 的行为) ).

那么为什么它在 C2 div 上不起作用？有什么办法可以解决这个问题吗？

(基本上我希望 C1 和 C2 div 放在一起，如果我增加它们的宽度或给它们留边距，溢出应该被隐藏)。

这是我正在尝试的:

.c1 {
  width: 220px;
  height: 200px;
  background-color: #666666;
  display: inline-block;
}
.c2 {
  width: 200px;
  height: 220px;
  background-color: #CCCCCC;
  display: inline-block;
}
.c3 {
  width: 180px;
  height: 210px;
  background-color: #333333;
  display: block;
}
.wrapper {
  background-color: red;
  width: 500px;
  height: 500px;
  display: inline-block;
  overflow: hidden;
}

<div class="wrapper">
  <div class="c1">C1</div>
  <div class="c2">C2</div>
  <div class="c3">C3</div>
</div>

Answer 1

将white-space:nowrap添加到容器(.wrapper)。

white-space

The white-space property is used to describe how whitespace inside the element is handled.

nowrap

Collapses whitespace as for normal, but suppresses line breaks (text wrapping) within text.

_{source: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space}

要了解为什么使用 white-space: normal，C2 换行但 C1 不换行，请参阅以下帖子:

• Understanding the wrapping behavior of inline-block elements with overflow:hidden
• Why are these inline-block divs wrapping in spite of their parent having overflow-x:scroll?

这是 answer by @BoltClock 的摘录:

• The value of overflow on a container doesn't influence whether or when its contents overflow; it only changes how it and its contents are rendered, when overflow does occur.

• So you have to force the inline-blocks to actually overflow the container.

• Since an inline-block has the same rigid physical structure as a block container box, it's impossible for an inline-block to "break apart" or wrap when it's the only inline-level box on a given line box.