设置溢出：仅对某些元素隐藏 [英] Setting overflow:hidden only for certain elements

问题描述

http://jsfiddle.net/waitinforatrain/sEX3n/

我有一个具有绝对位置的容器中的两个div。它们都被设置在容器的边界之外。如果我取消注释溢出：隐藏行它将隐藏容器外的一切。

但是，我只想要div1的溢出被隐藏，div2的是可见的。但是因为overflow：hidden必须在父级中设置，它将隐藏它们。有什么办法隐藏一个？

即使我可以得到它，以便它显示溢出在顶部和底部边界，但不是在左边和右边，将适合（我试图混淆溢出x和溢出y，但我认为这不是他们的预期目的）。

 < div id =container> 
< div id =div1>< / div> 
< div id =div2>测试< / div> 
< / div> 
 
 #container {
 width：300px; 
 position：relative; 
 border：1px solid＃000; 
 height：10px; 
 / * overflow：hidden; * / 
} 
 
＃div2 {
 position：absolute; 
 top：16px; 
 border：1px solid＃444; 
} 
 
＃div1 {
 position：absolute; 
 height：10px; 
 left：90％; 
 width：15％; 
 background-color：purple; 
} 
  

解决方案

：

• 添加额外的包装 div 。


• 将 overflow：hidden 应用于此 div 。


• 将 div 之外的时间。 ：//jsfiddle.net/sEX3n/4/rel =nofollow> http://jsfiddle.net/sEX3n/4/
  
  

  http://jsfiddle.net/waitinforatrain/sEX3n/

  I have two divs in a container with absolute position. Both of them are set to be outside the boundaries of the container. If I uncomment the overflow: hidden line it will hide everything outside the container.

  However, I only want div1's overflow to be hidden, and div2's to be visible. But because overflow:hidden has to be set in the parent, it will hide both of them. Is there any way to hide one?

  Even if I could get it so that it shows overflow at the top and bottom boundaries but not at left and right that would suit (I tried messing with overflow-x and overflow-y but I gather that that's not their intended purpose).

  <div id="container"> 
      <div id="div1"></div> 
      <div id="div2">Test</div> 
  </div> 
  
  #container {
      width: 300px;
      position: relative;
      border: 1px solid #000;
      height: 10px;
      /*overflow: hidden;*/
  }
  
  #div2 {
      position: absolute;
      top: 16px;
      border: 1px solid #444;
  }
  
  #div1 {
      position: absolute;
      height: 10px;
      left: 90%;
      width: 15%;
      background-color: purple;
  }
  

  解决方案

  The most obvious solution is to:

  • Add an extra wrapper div.
  • Apply overflow: hidden to this div.
  • Move the time outside this div.

  Like this: http://jsfiddle.net/sEX3n/4/

  这篇关于设置溢出：仅对某些元素隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！