css竖下来排列 |css3 图片轨迹移动

/* 竖下来排列的基本样式 */
.vertical {
display: flex;
flex-direction: column;
}

上面这段代码使用了flex布局的column方向，使得元素竖着排列。下面是一个例子：

<div class="vertical">
<p>第一行文字</p>
<p>第二行文字</p>
<p>第三行文字</p>
</div>

这样，大家就可以很方便地实现竖下来排列的效果了。如果需要对每个元素进行进一步的样式设置，可以像下面这样修改代码：

/* 每个元素的样式 */
.vertical p {
margin: 20px 0;
padding: 10px 20px;
background-color: #eee;
border: 1px solid #ccc;
}

上面这段代码使用了p选择器，设置了每个p标签的样式，包括外边距、内边距、背景色和边框。下面是一个完整的例子：

<div class="vertical">
<p>第一行文字</p>
<p>第二行文字</p>
<p>第三行文字</p>
</div>
<style>
.vertical {
display: flex;
flex-direction: column;
}
.vertical p {
margin: 20px 0;
padding: 10px 20px;
background-color: #eee;
border: 1px solid #ccc;
}
</style>

通过这种方式，大家可以很轻松地实现竖下来排列的效果，并可以灵活地修改样式。