[分享]css中怎么实现两排文字

CSS中实现两排文字的方法在网页设计中，有时我们需要将一段文字分成两排排列，以便更好地展现文字内容，这时我们需要使用CSS进行设置。下面介绍两种方法供大家参考。方法一：使用浮动属性我们可以将两段文字放...

CSS中实现两排文字的方法
在网页设计中，有时我们需要将一段文字分成两排排列，以便更好地展现文字内容，这时我们需要使用CSS进行设置。下面介绍两种方法供大家参考。
方法一：使用浮动属性
我们可以将两段文字放在两个不同的p标签中，并分别设置宽度、高度、边框、padding等样式，再给它们的父元素设置宽度和高度，使它们处于同一水平线上。为了使它们排列在一起，我们需要将它们设为浮动（float）。代码如下：

<style>
    .parent{
        width: 100%;
        height: 150px;  
    }
    .child1{
        width: 50%;
        height: 70px;
        border: 1px solid #ccc;
        padding: 10px;
        float: left;
    }
    .child2{
        width: 50%;
        height: 70px;
        border: 1px solid #ccc;
        padding: 10px;
        float: left;
    }
</style>

<div class="parent">
    <p class="child1">第一排文字内容</p>
    <p class="child2">第二排文字内容</p>
</div> 

方法二：使用display属性
我们可以将两段文字放在同一个p标签里，并将它们分别用span标签包裹，再将这些span设置为“display:inline-block”，使它们可以在同一行内排列。代码如下：

<style>
    p{
        width: 100%;
        text-align: center;
        font-size: 16px;
        line-height: 1.5;
    }
    span{
        display: inline-block;
        width: 45%;
        height: 70px;
        border: 1px solid #ccc;
        padding: 10px;
        margin: 10px;
        vertical-align: top;
    }
</style>

<p>
    <span>第一排文字内容</span>
    <span>第二排文字内容</span>
</p> 

以上两种方法都能够实现文字的分行排列，但具体使用哪种方法要根据实际情况来定。希望本文对大家有所帮助。