Question

我正在努力创建水平滚动效果......我需要在容器中有2行水平滚动。

.blocks-container {
  width: 100%;
}

.block {
  width: 16.6666%;
  height: 200px;
  float: left;
  background: #ccc;
  border: 1px solid #fff;
  box-sizing: border-box;
}

<div class="blocks-container">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

https://jsfiddle.net/dg01n7ve/

我有3行而没有滚动。而且我还想用垂直鼠标滚轮来控制水平滚动，如图here所示，但本教程并没有帮助我，原因有两个：它只有一行，块是正方形（我的是矩形）。可以在不使用任何jQuery插件等的情况下完成吗？

Answer 1

使用此 CSS 向左移除浮动并在行中添加显示。

.blocks-container { width: 100%; white-space: nowrap; }
.block { width: 16.6666%; height: 200px; background: #ccc; border: 1px solid #fff; box-sizing: border-box; display: inline-block;}

Answer 2

如果您可以管理哪一项必须在第一行或第二行显示，我建议使用内联块显示并设置溢出x＆amp;是这样的：

.blocks-container {
    width: 100%;
    height: 400px;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    border: 1px solid #ddd;
    background-color: #fbfbfb;
}

.block {
  width: 16.6666%;
  height: 200px;
  background: #ccc;
  border: 1px solid #fff;
  box-sizing: border-box;
  display:inline-block;
  float:none;
}

<div class="blocks-container">
  <div class="firstLine">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
  </div>
  <div class="secondLine">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
  </div>
</div>

编辑：全屏查看片段以获得真实渲染

CSS水平滚动

2 个答案: