如何解决关于带有 <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 的概念。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。