當div寬度很小時停止包裝圖像

我有一個包含ul的div，並且在每個li中都有一張圖片。我已經將剩下的圖片放到了一條直線上，但是一旦它到達div的末端，它就會包裹起來。我希望照片繼續向右側隱藏，以便我能夠創建一個旋轉木馬。我的代碼如下。當div寬度很小時停止包裝圖像

的HTML

<div id="container"> 
    <div class="lfbtn"></div> 
    <ul id="image_container"> 
     <li class="the_image"> 
      <img src="" /> 
     </li> 
    </ul> 
    <div class="rtbtn"></div> 
</div>

的CSS

#container { 
    width: 900px; 
    height: 150px; 
    margin: 10px auto; 
} 

#image_container { 
    position: relative; 
    left: 50px; 
    list-style-type: none; 
    width: 700px; 
    height: 110px; 
    overflow: hidden; 

} 

#image_container li { 
    display: inline-block; 
    padding: 7px 5px 7px 5px; 
    float: left; 
} 

.lfbtn { 
    background-image: url(../../img/left.gif); 
    background-repeat: no-repeat; 
    margin: 10px; 
    position: relative; 
    float: left; 
    top: -12px; 
    left: 50px; 
    height: 90px; 
    width: 25px; 
} 

.rtbtn { 
    background-image: url(../../img/right.gif); 
    background-repeat: no-repeat; 
    height: 90px; 
    width: 25px; 
    margin: 10px; 
    position: relative; 
    top: -101px; 
    left: 795px; 
}

提前感謝！

來源

2010-03-18 user103219

當你搞清楚它確定它在IE和FireFox中工作。似乎我想出的東西從來沒有... – Peter 2010-03-18 20:10:03

更新你的風格，以反映這一點：

<div id="container"> 
    <div class="lfbtn"></div> 
    <div style="width: 700px; overflow: hidden;"> 
     <ul id="image_container" style="width: 1000000px;"> 
      <li class="the_image"> 
       <img src="Untitled-1.gif" /> 
      </li> 
     </ul> 
    </div> 
    <div class="rtbtn"></div> 
    <br style="clear: both;" /> 
</div>

您需要設置寬度上封裝了UL，然後設置溢出上一個div。將您的UL設置爲具有一定的寬度，以便即使使用很多LI也不會纏繞。

說實話，我不確定爲什麼UL不會像DIV一樣處理這個問題，即使UL設置爲顯示模塊。任何CSS大師都會關注評論。

來源

2010-03-18 20:04:28

對不起，但不行。簡單地添加溢出：隱藏;對頁面沒有影響。我甚至試圖從#image_container中刪除它，並保持寬度和圖像溢出頁面。 – user103219 2010-03-18 20:09:07

檢查我的更新回答 – 2010-03-18 20:14:21

你可以發佈你的網址或你使用的圖片嗎？至少是圖片的尺寸。 – 2010-03-18 20:17:09

這裏有一個工作SSCCE與所需的最小樣式得到它的工作：

<!doctype html> 
<html lang="en"> 
    <head> 
     <title>SO question 2472979</title> 
     <style> 
      #images { 
       width: 700px; 
       height: 100px; 
       overflow: hidden; 
       white-space: nowrap; 
      } 
      #images li { 
       list-style-type: none; 
       display: inline; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="images"> 
      <ul> 
       <li><img src="http://sstatic.net/so/img/logo.png" width="250" height="61"></li> 
       <li><img src="http://sstatic.net/so/img/logo.png" width="250" height="61"></li> 
       <li><img src="http://sstatic.net/so/img/logo.png" width="250" height="61"></li> 
      </ul> 
     </div> 
    </body> 
</html>

你看，關鍵是whitespace: nowrap;。如果你想讓它成爲一個完全適合的傳送帶，只需用overflow-x: scroll;和overflow-y: hidden;替換overflow: hidden;即可。

來源

2010-03-18 21:35:49 BalusC

你如何得到這個與響應式設計一起工作？換句話說，我的圖像上的最大高度似乎使上述解決方案無法正常工作...... – eeeeaaii 2012-04-23 17:58:25

當div寬度很小時停止包裝圖像

回答

相關問題