如何使多个div水平滚动? [英] How to make multiple divs to scroll horizontally?

问题描述

我希望我的图块位于同一行中，并且如果图块超出容器的宽度，则容器应水平滚动.看下面的演示，图块将添加到下一行，因此我必须垂直滚动才能访问它们.如何使水平滚动工作并使所有磁贴保持在同一行?

I want my tiles to be in the same row, and the container to scroll horizontally, if the tiles go beyond the width of the container. Looking at the following demo, the tiles get added to the next row, so I have to scroll vertically to access them. How can I make horizontal scroll work, and keep all tiles in the same row?

.container {
  width: 600px;
  max-height: 140px;
  border: 1px solid green;
  overflow-x: scroll;
  overflow-y: scroll;
  white-space: nowrap;
}
.tile {
  width: 200px;
  height: 92px;
  float: left;
  margin: 10px 10px 50px 10px;
  background: cornflowerblue;
}

<div class="container">
  <div><img class="tile"></div>
  <div><img class="tile"></div>
  <div><img class="tile"></div>
</div>

推荐答案

您需要在父级上设置 overflow-x:scroll; 和 overflow-y:hidden; ，以及内部div上的 white-space:nowrap; ，以及 floatLeft

You need to set overflow-x:scroll; and overflow-y: hidden; on parent, and white-space:nowrap; on inner div and also display: inline-block; on floatLeft

.container {
  width: 480px; 
  height: 140px; 
  border: 1px solid green;
  overflow-x: scroll;
  overflow-y: hidden;
}

.inner {
  height: 100%;
  white-space:nowrap; 
}

.floatLeft {
  width: 200px;
  height: 92px; 
  margin:10px 10px 50px 10px; 
  display: inline-block;
}

img {
  height: 100%;
}

<div class="container">
   <div class="inner">
       <div class="floatLeft">
           <img src="http://placehold.it/350x150" class="tile">
       </div>
       <div class="floatLeft">
           <img src="http://placehold.it/350x150" class="tile">
       </div>
       <div class="floatLeft">
           <img src="http://placehold.it/350x150" class="tile">
       </div>
   </div>
</div>

这篇关于如何使多个div水平滚动?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！