[分享]css做一列多行

CSS做一列多行一般使用float属性来实现。我们可以使用一个div作为容器，然后每个p标签代表一行内容。接下来，我们将每个p标签设置为50的宽度并使用float:left属性，这样每个p标签就能够排...

CSS做一列多行一般使用float属性来实现。我们可以使用一个div作为容器，然后每个p标签代表一行内容。接下来，我们将每个p标签设置为50%的宽度并使用float:left属性，这样每个p标签就能够排在同一行。如果某一行中的内容太多，我们可以添加clear:both属性来确保下一行从新的一行开始。以下是示例代码：

<div class="container">
   <p>这是第一行的内容</p>
   <p>这是第二行的内容</p>
   <p>这是第三行的内容</p>
   <p>这是第四行的内容，内容较长需要跨越两行，所以我们需要添加clear:both属性确保下一行从新的一行开始。</p>
   <p style="clear:both">这是第五行的内容</p>
   <p>这是第六行的内容</p>
</div>

<style>
   .container {
   width: 50%;
   }
   p {
   width: 50%;
   float: left;
   }
</style> 

以上代码可以在Web浏览器中运行，效果如下所示：
这是第一行的内容 这是第二行的内容
这是第三行的内容 这是第四行的内容，内容较长需要跨越两行，所以我们需要添加
clear:both属性确保下一行从新的一行开始。
这是第五行的内容 这是第六行的内容