[分享]css中div中元素纵向排列

<div>
  <p>1号元素</p>
  <p>2号元素</p>
  <p>3号元素</p>
</div> 

在CSS中设置纵向排列有多种方法，其中使用CSS的Flexbox属性是非常方便的一种方法，它可以快速设置每个元素的高度和位置。

<div style="display:flex; flex-direction:column;">
  <p>1号元素</p>
  <p>2号元素</p>
  <p>3号元素</p>
</div> 

如果需要让元素靠底部对齐，可以使用align-items属性，并设置为flex-end。

<div style="display:flex; flex-direction:column; align-items:flex-end;">
  <p>1号元素</p>
  <p>2号元素</p>
  <p>3号元素</p>
</div> 

此外还可以使用CSS的Grid属性来进行纵向排列，同样可以快速设置每个元素的高度和位置。在Grid布局中，只需要设置每个元素的grid-row属性即可。

<div style="display:grid; grid-template-columns:1fr; grid-template-rows:auto;">
  <p style="grid-row:1;">1号元素</p>
  <p style="grid-row:2;">2号元素</p>
  <p style="grid-row:3;">3号元素</p>
</div> 

纵向排列在CSS中非常常见，以上是几种比较常用的方法，可以根据自己的需求进行选择。通过灵活运用这些CSS特性，可以使页面更加自由和美观。