Question

如果瓷砖超出容器的宽度，我希望我的瓷砖位于同一行，并且容器要水平滚动。看下面的演示，瓷砖会被添加到下一行，所以我必须垂直滚动才能访问它们。如何使水平滚动工作，并将所有瓷砖保持在同一行？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

将display：inline-block添加到包含divs css：

.floatleft{
 display: inline-block;
}

或者你可以在每个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>

继承人的工作小提琴： https://jsfiddle.net/edencorbin/rq0L7x7v/

Answer 3

我希望我的瓷砖位于同一行，并且容器要水平滚动，如果瓷砖超出容器的宽度。

您的.container课程已修复480px。如果这是故意的，那么您需要做的就是将display: inline-block添加到.floatLeft类，如下所示：

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

否则，您可以使.container类具有灵活的宽度。如果您喜欢这个建议，可以将宽度更改为min-width: 480px，宽度会随着您的内容扩展。

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

但是，如果您的屏幕宽度太小而无法容纳多个图块，那么它们将在新行中垂直对齐，这是正常的预期行为。或者更好的是，你可以做到这两点。选择是你的。

Answer 4

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

如何使多个div水平滚动？

4 个答案: