浮動圖像溢出沒有包裝div

Question

我有一些圖像到div。

<div> 
    <img /> 
    <img /> 
    <img /> 
    <img /> 
</div> 

所有圖像設置爲50px的相同高度。寬度設置爲自動。

問題是，我如何讓圖像左移到達到父div的溢出區域的水平線中。父div需要100％的寬度。

我想將div設置爲overflow-x：scroll。當圖像是簡單的float：left時，如果它們擴展div的寬度，則它們會分成另一行。但是我怎麼才能讓他們進入溢出狀態，所以我必須滾動才能看到其他人？

主要問題是我不能使用js或包裝div。這個問題必須用css來解決。

Answer 1

使用white-space: nowrap;關於img元素的容器div和display:inline。

FIDDLE

<div> 
    <img src="http://placehold.it/350x50"/> 
    <img src="http://placehold.it/350x50"/> 
    <img src="http://placehold.it/350x50"/> 
    <img src="http://placehold.it/350x50"/> 
</div> 

div 
{ 
    white-space:nowrap; 
    overflow-x: auto;  
} 
img 
{ 
    display: inline; 
    margin-right: 10px; 
} 

Answer 2

試試這個..我希望這可以幫助你， Cascsading SYLE ..

.float_l { float: left } 
    .float_r { float: right } 
    .col_w200 { 
     overflow: scroll; 
     height: 300px; 
     width: 200px; 
    } 

    .lp_frontpage { margin: 0; padding: 0; list-style: none } 
    .lp_frontpage li { 
     margin: 0; 
     padding: 0; 
     display: inline 
    } 
    .lp_frontpage li a { 
     float: left; 
     display: table; 
     width: 200px; 
     height: 100px; 
     margin: 0 10px 10px 0 
    } 
    .lp_frontpage li a img { width: 190px; height: 90px; border: 1px solid #3c4445; padding: 4px; } 

HTML代碼..

     <div class="col_w200 float_r"> 
         <h2>Web Design Gallery</h2> 
      <ul class="lp_frontpage"> 
          <li><a href="#"><img width="200" height="100" src="images/_01.jpg" alt="Image 01" /></a></li> 
          <li><a href="#"><img width="200" height="100" src="images/_image_02.jpg" alt="Image 02" /></a></li> 
          <li><a href="#"><img width="200" height="100" src="images/_03.jpg" alt="image 03" /></a></li> 
          <li><a href="#"><img width="200" height="100" src="images/_04.jpg" alt="image 04" /></a></li> 
         </ul> 


        </div>