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

【问题标题】：Question about horizontal scroll in CSS with <p> paragraphs html关于CSS中带有<p>段落html的水平滚动的问题
【发布时间】：2021-04-09 22:59:21
【问题描述】：

我正在学习 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>

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

提前致谢

【问题讨论】：

标签： html css scroll paragraph

【解决方案1】：

.scroll { 
    flex-direction: column;
}

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

【讨论】：

您的期望是什么？您希望这些项目在每一行中吗？
我希望它们分成三个街区。您可以水平滚动浏览这些块。
感谢您的宝贵时间
添加高度并给出溢出：auto

【解决方案2】：

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 的概念。

【讨论】：