Question

我正在网页上构建滚动框架。

页面宽度为>>> r = requests.get(pdf_url).content >>> open('article_name', 'wb').write(r) 211853。

我总共有7个街区，但我只想一次显示5个街区用于向左和向右滚动的右键。每个块都是width: 90%

我应该考虑开始构建这个的最小css样式是什么？

Answer 1

我应该考虑什么样的最小css样式才能开始建立这个？

这是你想要实现的目标吗？

* {
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
}

body {
  text-align: center;
}

.wrapper {
  display: inline-block;
  width: 90vw;
  height: 100px;
  background-color: lightgray;
  padding: 16px 0;
  overflow-x: scroll;
  text-align: start;
}

.content {
  display: inline-block;
  height: 100%;
  width: calc(90vw / 5);
  text-align: start;
  float: left;
}

.content-wrapper {
  height: 100%;
  width: calc((90vw / 5) * 7);
  text-align: start;
}

.buttons-wrapper {
  position: absolute;
  width: 90vw;
  height: calc(100px - 16px);
}

.left-button,
.right-button {
  position: absolute;
  background-color: black;
  width: 30px;
  height: 30px;
  top: calc(50% - 15px);
  color: white;
  text-align: center;
}

.left-button {
  left: 0;
}

.right-button {
  right: 0;
}

<div class="wrapper">
  <div class="buttons-wrapper">
    <div class="left-button">L</div>
    <div class="right-button">R</div>
  </div>
  <div class="content-wrapper">
    <div class="content" style="background-color: red"></div>
    <div class="content" style="background-color: orange"></div>
    <div class="content" style="background-color: yellow"></div>
    <div class="content" style="background-color: green"></div>
    <div class="content" style="background-color: lightblue"></div>
    <div class="content" style="background-color: blue"></div>
    <div class="content" style="background-color: violet"></div>
  </div>
</div>

如何在css中左右滚动内容块

1 个答案: