为什么添加多个图片时我的div没有水平滚动？ [英] Why isn't my div scrolling horizontally when adding multiple images?

问题描述

我有一个外部div，在里面，我有一个内部div包含一个图像列表。当图像比外部div宽时，我想让它水平滚动，但相反，它只是将图像放在下一行，而不是扩展。如果我添加很多行，div将垂直滚动，但水平滚动，它不会。这发生在我尝试过的每个浏览器上 - Firefox，Chrome，IE和Safari。

I have an outer div, and inside of that, I have an inner div which contains a list of images. When the images are wider than the outer div, I want to have it scroll horizontally, but instead, it just puts the image on the next line instead of expanding. If I add many rows, the div does scroll vertically, but horizontally, it doesn't do it. This happens on every browser I've tried - Firefox, Chrome, IE, and Safari.

这里是css：

#grid-container   { left:33px; position:relative; width:300px; }
#grid   { width:310px; height:400px; overflow:auto; margin-bottom: 15px; }
#grid-container ul   { width:305px; }
#grid-container li   { float:left; list-style-type:none; padding:5px 15px 5px 15px; height:88px; text-align:center; }

.image-row   { float:left; margin-left: 10px; }
.grid-image   { height:50px; margin-left:-20px;  }

这里是html：

<div id="grid-container">
  <div id="grid"> 
    <div id="row1" class="image-row"> 
      <ul> 
        <li> 
          <img id="img1" class="grid-image" src="images/img1.jpg"> 
        </li>
        <li>
          <img id="img2" class="grid-image" src="images/img2.jpg"> 
        </li>
        <li>
          <img id="img3" class="grid-image" src="images/img3.jpg"> 
        </li>
        <li>
          <img id="img4" class="grid-image" src="images/img4.jpg"> 
        </li>
      </ul>
    </div>
    <div id="row2" class="image-row"> 
      <ul> 
        <li> 
          <img id="img5" class="grid-image" src="images/img5.jpg"> 
        </li>
        <li>
          <img id="img6" class="grid-image" src="images/img6.jpg"> 
        </li>
      </ul>
    </div>
  </div>
</div>

问题是img4显示在第二行（img5和img5在第三行）即使它应该在第一行，并且 grid div应该水平滚动。它会垂直滚动。我可以强制div扩展吗？如果我从网格div中删除宽度，我会得到水平滚动条，但图像仍然在第二行。

The problem is img4 is showing on the second row (with img5 and img5 on the third row), even though it should on the first row and the grid div should scroll horizontally. It does scroll vertically. Can I force the div to expand? If I remove the width from the grid div, I do get the horizontal scroll bar, but the image is still on the second row.

推荐答案

这样做吗？我简化了一些。

Will this do? I simplified it somewhat.

CSS（你可以删除边框，他们只是为了你可以看到发生了什么）：

CSS (you can remove the borders, they are just so you can see what is happening):

#grid-container {position: relative; width: 300px; height: 400px; overflow: auto; border: 1px red solid;}
#grid {border: 1px blue solid;}
#grid ul {height: 40px; list-style-type: none; white-space: nowrap; padding: 0; margin: 0; border: 1px green solid;}
#grid ul li {display: inline; padding: 0; margin: 0;}
#grid ul li img {height: 50px;}

HTML ：

<div id="grid-container">
 <div id="grid">
  <ul>
    <li><img src="testimage.jpg"></li>
    <li><img src="testimage.jpg"></li>
    <li><img src="testimage.jpg"></li>
    <li><img src="testimage.jpg"></li>
    <li><img src="testimage.jpg"></li>
    <li><img src="testimage.jpg"></li>
  </ul>
  <ul>
   <li><img src="testimage.jpg"></li>
   <li><img src="testimage.jpg"></li>
   <li><img src="testimage.jpg"></li>
  </ul>
 </div>
</div>

这篇关于为什么添加多个图片时我的div没有水平滚动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！