如何使浮動元素的直線溢出：隱藏

我目前有一個「直線」的不同位置的項目浮動：左 - 從外部左側的所有空間到外部的右邊身體。如何使浮動元素的直線溢出：隱藏

我現在的問題是，我添加了更多的項目比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

如何使浮動元素的直線溢出：隱藏

回答

相關問題