如何使浮动元素的直线溢出：隐藏

我目前有一个“直线”的不同位置的项目浮动：左 - 从外部左侧的所有空间到外部的右边身体。如何使浮动元素的直线溢出：隐藏

我现在的问题是，我添加了更多的项目比100％的身体“容器”适合所以浮动项目将自然分解线。

虽然我希望做的事情是，我只想让我的物品继续进入一些溢出：隐藏状态（而不是分解） - 这样我基本上可以继续添加物品而不会分解线条。

我的HTML基本上是以下 - the issue can also be seen here：

#lights { 
    position: absolute; 
    z-index: 999; 
overflow: hidden; 
} 

.lightItem { 
    float: left; 
} 

// ** I basically repeat this pattern in the straight line // * 
.lightItem.c1Light_1 { 
    padding: 38px 0 0 42px; 
} 

.lightItem.c1Light_2 { 
    padding: 37px 0 0 82px; 
} 

.lightItem.c1Light_3 { 
    padding: 46px 0 0 59px; 
}

来源

2013-04-22 user1231561

只需添加overflow:hidden和高度#lights。所以，你的#lights CSS将是：

#lights { 
position: absolute; 
z-index: 999; 
overflow: hidden; 
height: 78px; //set this to whatever you need 
}

来源

2013-04-22 16:42:28 Omega

噢该死，尝试所有类型的东西了，但由于某种原因没有尝试添加任何高度，嘿嘿。感谢一群人，这很容易解决了这个问题！ – user1231561 2013-04-22 16:44:50

@ user1231561很高兴帮助！只是关于高度的一个说明，它设置为78px，因为这是您在这些图像上的最高高度。溢出：隐藏然后剪辑任何超过78px高度的东西。 – Omega 2013-04-22 16:48:21

好一招将其与不同的（宽）宽度被包装成一个div，让线元素隐藏基于你可以调整它的溢出根据你的需要它是一个非常简单的例子，因为我很懒，我没有在所有的浏览器上试用它。

<html> 
<head> 
    <style> 
     #main_wrapper 
     { 
      width: 960px; 
      height: 200px; 
      overflow: hidden; 
      margin: auto; 
     } 

     #main_wrapper .overflow_line 
     { 
      width: 300%; 
      height: 200px; 
      clear: both; 
      border: 1px solid #d3d3d3; 
     } 

     #main_wrapper .overflow_line > div 
     { 
      float: left; 
      width: 100px; 
      height: 120px; 
     } 

    </style> 

</head> 
<body> 
    <div id="main_wrapper"> 
     <div class="overflow_line"> 
      <div>a</div> 
      <div>a</div> 
      <div>a</div> 
      <div>a</div> 
      <div>a</div> 
      <div>a</div> 
      <div>a</div> 
      <div>a</div> 
      <div>a</div> 
      <div>a</div> 
     </div> 
    </div> 
</body>

来源

2013-04-22 16:39:09 shadowdroid

嗨Shadowdroid，非常感谢您抽出用一个例子的时间 - 与宽度300％的做法你的回答实际上也解决了我的问题，十分感谢设定我的想法在正确的方向！ :) – user1231561 2013-04-22 16:46:15

ehehe只要它的工作，我很高兴:) – shadowdroid 2013-08-23 11:21:49

如何使浮动元素的直线溢出：隐藏

回答

相关问题