可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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>

回答1:

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>

回答2:

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/

回答3:

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;
    }

回答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.

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.