美文网首页
2020-08-06 css 移动端 一行左边一行文字,右边

2020-08-06 css 移动端 一行左边一行文字,右边

作者: 流泪手心_521 | 来源:发表于2020-08-06 14:37 被阅读0次

1.结构

<div class="box">
        <div class="textbox">sdfsd</div>
        <div class="rtbox">
            <span>提前10分钟</span>
            <span>提前20分钟</span>
            <span>提前30分钟</span>
            <span>提前40分钟</span>
            <span>提前10分钟</span>
            <span>提前20分钟</span>
        </div>
    </div>

2.css

.box{
            display: flex;
            align-items: center;
            background: #ccc;
            padding: 20px;
        }
        .textbox{
            background: red;
            vertical-align: baseline;
            display: inline-block;
            width: 60%;
        }
        .rtbox{
            background: green;
            display: table-cell;
            width: 40%;
        }
        .rtbox span{
            display: inline-block;
            background: yellow;
            width: 50%;
            float: left;
        }

相关文章

网友评论

      本文标题:2020-08-06 css 移动端 一行左边一行文字,右边

      本文链接:https://www.haomeiwen.com/subject/anwzrktx.html