html - 如何制作水平滚动的网站？

Question

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

有任何想法吗？

标签： htmlcss

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>