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

问题描述

我正在学习有关 HTML 和 CSS 的 Web 开发基础知识。我今天遇到了一个问题：我想在我的页面上做一个水平滚动，里面有段落（这里由 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>

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

提前致谢

解决方法

.scroll { 
    flex-direction: column;
}

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

,

Flexbox 提供了一个名为 flex-direction 的属性。这意味着 flexbox 子项的布局方向，默认情况下设置为 row。 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 的概念。