How to make multiple divs to scroll horizontally?

2019-05-24 19:40发布

站内问答 / HTML/CSS
1687 4 4

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>

标签： html css scroll
举报
4条回答
beautiful°
2楼-- · 2019-05-24 20:07

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.

Your .container class has a fixed with of 480px. If this is intentional then all you need to do is add display: inline-block to your .floatLeft class like so:

.container > .float-left {
    display: inline-block;
}

Otherwise, you can make your .container class have a flexible width. If you like the suggestion, you can change the width to min-width: 480px that way your width will expand with your content.

.container {
  min-width: 480px; /* changes occurred here */
  max-height: 140px;
  border: 1px solid green;
  overflow-x: scroll;
  overflow-y: scroll;
  white-space: nowrap;
}

However, if your screen width is too small to hold many tiles, then they will align vertically in a new row, which is normal expected behavior. Or better yet, you could do both. The choice is yours.

查看更多
0人赞 添加讨论(0) 举报
Bombasti
3楼-- · 2019-05-24 20:12

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>

查看更多
0人赞 添加讨论(0) 举报
Emotional °昔
4楼-- · 2019-05-24 20:16

HTML: 

<div  class="container" id="content">
    <div >
        <img src="img" height="190">
       <img src="img" height="190">
</div>

CSS:

html, body {margin: 0; padding: 0;}

    #content{
        width: auto;
        height:210px;
        overflow-x: scroll;
        overflow-y: hidden;
        white-space: nowrap;
    }

    #contentimg {
        border: 0;
        display: inline-block;
        vertical-align: middle;
    }
查看更多
0人赞 添加讨论(0) 举报
在下西门庆
5楼-- · 2019-05-24 20:27

Add display: inline-block to your containing divs css:

.floatleft{
 display: inline-block;
}

or alternatively you can add it as a style attribute on each div: 

<body>
<div  class="container">
<div style="display: inline-block" class="floatLeft">
    <img class="tile">
</div>
<div style="display: inline-block" class="floatLeft">
    <img class="tile">
</div>
<div style="display: inline-block" class="floatLeft">
    <img class="tile">
</div>
</div>
</body>

Heres the working fiddle: https://jsfiddle.net/edencorbin/rq0L7x7v/

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)