为什么溢出：隐藏不工作在我的div？ [英] Why is overflow: hidden not working on my div?

问题描述

如果您尝试将 margin-left 赋予C1 div，则它的移动和溢出被隐藏。但是如果你尝试给C2 div赋予 margin-left ，它向右移动，但溢出不隐藏，而是移动到下一行（行为 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 = > < div class =c1> C1< / div> < div class =c2> C2< / div> < div class =c3> C3< / div>< / div>  

解决方案

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

白色空间

white-space 属性用于描述如何处理
元素中的空格。

nowrap



折叠空格为正常，但禁止换行符b包装）。

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

为了理解为什么用 white-space：normal 不会，看到这些帖子：

• 了解inline-block元素的包装行为


• 为什么这些内联块的div包裹在尽管他们的父have overflow-x：scroll？

这是一个来自由@BoltClock回答：

• 容器上的 overflow 的值不会影响或
  当其内容溢出时的




• 所以你必须强制在线块实际溢出
  容器。




• 由于内联块与块
  容器盒具有相同的刚性物理结构， 。

$ b

If you try to give margin-left to C1 div, it moves and overflow is hidden. But if you try to give margin-left to C2 div, it moves towards right, but overflow is not hidden, rather it moves in next line (behavior of inline-block).

So why is it not working on C2 div? Is there any way to solve this problem?

(Basically I want C1 and C2 div to be placed together and overflow should be hidden if I increase their widths, or if I give them margins).

Here's what I'm trying:

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

解决方案

Add white-space: nowrap to the container (.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}

To understand why, with white-space: normal, C2 wraps but C1 does not, see these posts:

• 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?

Here's an excerpt from an 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.

这篇关于为什么溢出：隐藏不工作在我的div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！