HTML CSS 将 p div 分成两行 - CSS

在网页开发中，有时我们需要将一段文字或一组元素分成两行显示，那么如何使用HTML和CSS来实现呢？

使用float属性和clearfix清除浮动

我们可以使用float属性将p元素或div元素分成两行，在第一行结束的地方加上一个clearfix清除浮动，以便将下一个元素放在下一行。

<!--HTML代码-->
<div class="container">
  <p class="float-left">这是第一行</p>
  <div class="clearfix"></div>
  <p class="float-left">这是第二行</p>
  <div class="clearfix"></div>
</div>

<!--CSS代码-->
.float-left {
  float: left;
  width: 50%;
}
.clearfix {
  clear: both;
}

这里我们使用了float属性将p元素分成了两行，同时使用clearfix清除浮动，以便将下一个元素放在下一行，从而实现了将一组元素分成两行显示的效果。

使用display属性和inline-block

我们也可以使用display属性将p元素或div元素分成两行，将它们的display属性改为inline-block，然后将宽度设置为50%。

<!--HTML代码-->
<div class="container">
  <p class="inline-block">这是第一行</p>
  <p class="inline-block">这是第二行</p>
</div>

<!--CSS代码-->
.inline-block {
  display: inline-block;
  width: 50%;
  vertical-align: top;
}

注意，如果我们不将p元素的垂直对齐方式（vertical-align）设置为top，那么它们之间可能会出现一些间隔。

以上就是将p元素或div元素分成两行显示的两种方法。在实际项目中，可以根据需要来选择适合的方法。