关于 CSS 中水平滚动的问题 <p> 段 html

Question

我正在学习 HTML 和 CSS 的网络开发基础知识。我今天遇到了一个问题：我想在我的页面上做一个水平滚动，里面有段落（在这里由 Lorem 表示）但是它们出现在一行中，而我希望它们成块。

这是我的代码：

.scroll {
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}
.part {
    display: inline-block;
    align-content: flex-start;
    overflow-x: visible;
    overflow-y: visible;
    flex-wrap: wrap;
    height: 200px;
    width: auto;
}

<div class="scroll">
  <div class="part">
    <p>
      Lorem...
    </p>
  </div>
  <div class="part">
    <p>
      Lorem...
    </p>
  </div>
  <div class="part">
    <p>
      Lorem...
    </p>
  </div>
</div>

我尝试了很多东西但都没有成功...（我觉得第一部分很好）

提前致谢

Answer 1

.scroll { 
    flex-direction: column;
}

添加此样式..这会将内容流更改为按列排列

Answer 2

Flexbox 提供了一个名为 flex-direction 的属性。这意味着 flexbox 子元素的布局方向 ，默认设置为行。 flex-direction

.parent {
  display: flex;
}

<div class="parent">
  <div class="child1">
    <p>Hello I'm Child 1</p>
  </div>
  <div class="child2">
    <p>Hello I'm Child 2</p>
  </div>
  <div class="child3">
    <p>Hello I'm Child 3</p>
  </div>

</div>

如您所见，在上面的示例中 div 是一个块级元素，但它们显示为内联元素，因为 flex-direction 设置为 row 默认。现在将方向从 row 更改为 column，这将把 flexbox 子项放在列布局中。

.parent {
  display: flex;
  flex-direction: column;
}

<div class="parent">
  <div class="child1">
    <p>Hello I'm Child 1</p>
  </div>
  <div class="child2">
    <p>Hello I'm Child 2</p>
  </div>
  <div class="child3">
    <p>Hello I'm Child 3</p>
  </div>

</div>

希望您了解 flex-direction 的概念。

关于 CSS 中水平滚动的问题 <p> 段 html

Question about horizontal scroll in CSS with <p> paragraphs html

html

css

scroll

paragraph