如何制作水平滚动网站？

Question

我正在尝试制作一个水平滚动网站，并且我希望div浮动到我可以执行的右侧。但是我不想定义容器的宽度，因为它在不同页面上可能会有所不同。

有什么想法吗？

Answer 1

使用

body {
  overflow-x:scroll;
}

如您所见：

body {
  overflow-x:scroll;
}

.cont {
  display:flex;
}

.cont div {
  height:400px;
  width:400px;
  background:pink;
  border:1px solid #000;
  flex-shrink:0;
  margin-right:20px;
}

<div class="cont">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>