css怎么排两行盒子 |css 自动滚动

首先大家需要创建HTML结构。大家可以使用div标签来创建两个外层盒子，并为它们添加类名以便后面的CSS选择器能够选中它们。代码如下：

<div class="container">
<div class="row1">
<p>第一行第一个盒子</p>
<p>第一行第二个盒子</p>
<p>第一行第三个盒子</p>
</div>
<div class="row2">
<p>第二行第一个盒子</p>
<p>第二行第二个盒子</p>
<p>第二行第三个盒子</p>
</div>
</div>

在上面的代码中，大家创建了一个名为“container”的外层盒子，然后在它内部创建了两个名为“row1”和“row2”的子盒子，它们分别用来存放第一行和第二行的盒子。每一行中都有三个盒子，分别放置内容。

接着，大家需要为这些盒子添加CSS样式。大家可以使用以下样式来排列这些盒子：

.container {
display: flex;
flex-wrap: wrap;
}
.row1,
.row2 {
width: 100%;
display: flex;
}
.container p {
width: calc(100% / 3);
height: 100px;
border: 1px solid black;
}

在上面的代码中，大家使用了Flexbox布局来排列这些盒子。大家将外层盒子“container”的display属性设置为“flex”，这样它内部的所有子元素都会按照Flexbox的规则来排列。接着大家将Flexbox的wrap属性设置为“wrap”，这样子元素会按照大家指定的宽度自动换行。

然后大家为“row1”和“row2”两个子盒子设置了display属性为“flex”，这样它们内部的元素也会按照Flexbox的规则来排列。最后，大家给所有p标签设置了宽度为33.33%，这样每一行会显示三个等宽的盒子。

以上就是如何用CSS排列两行盒子的方法。