Question

如果您尝试将margin-left提供给C1 div，则会移动并溢出溢出。但是如果你尝试将margin-left提供给C2 div，它会向右移动，但溢出不会被隐藏，而是会在下一行移动（inline-block的行为）。

那么为什么它不能用于C2 div呢？有没有办法解决这个问题？

（基本上我希望将C1和C2 div放在一起，如果我增加它们的宽度，或者如果我给它们边距，则应该隐藏溢出。）

这是我尝试的内容：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 1

将white-space: nowrap添加到容器（.wrapper）。

white-space

white-space属性用于描述内部空格   该元素得到处理。

<强> nowrap

与正常情况一样折叠空格，但会抑制换行符（文本   包装）在文本中。

_{来源：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：

容器上overflow的值不会影响是否或   当其内容溢出时;当溢出时，它只会改变它及其内容的呈现方式。



所以你必须强制内联块实际溢出   容器



由于内联块具有与块相同的刚性物理结构   容器盒，内联块不可能“分开”或   当它是给定行框上唯一的内联级别框时会换行。

Answer 2

不要使用Display Property ..例如使用Float属性

let mainViewController = YourViewController(nibName:"YourVCNibName", bundle:nil)

为什么溢出：隐藏不在我的div上工作？

2 个答案: