移动端左右文字布局

最新推荐文章于 2021-06-04 21:36:59 发布

月落星河°

最新推荐文章于 2021-06-04 21:36:59 发布

阅读量524

点赞数

分类专栏： CSS 文章标签： css 布局 flex 移动端左右文字移动端左右排列

本文链接：https://blog.csdn.net/wangzongyang1025_/article/details/106193478

版权

CSS 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

左右布局，右边内容可以一直增加，左边保持不动，如下图：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            display: flex;
            margin: 30px 0;
        }

        .left {
            margin-right: 20px;
        }

        /* 可以使用单位，也可以使用flex */
        .right {

            /* width: 100px; */
            flex: 1;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="left">名称:</div>
        <div class="right">重庆晨报。</div>
    </div>
    <div class="box">
        <div class="left">时间:</div>
        <div class="right">2020-05-18 14:13:47</div>
    </div>
    <div class="box">
        <div class="left">内容:</div>
        <div class="right">2020-05-18 14:13:47 重庆晨报
            奥巴马再批特朗普政府抗疫不力，特朗普回击：他是不称职的总统，极其无能
            中国驻以色列大使意外去世，最后三个月日程密密麻麻！
            天门山翼装飞行失联女生已身亡
            曝黄景瑜前女友自杀未遂 王雨馨妹妹曾指控黄景瑜有家暴行为
            汪涵乔装打扮成司机，王一博一个哈欠认出汪涵，今日上午10点多，刘某被发现，，。参与救援的浙江公羊救援队队长徐立军告诉北青报记者，刘某已不幸身亡。</div>
    </div>
</body>

</html>

月落星河°

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
移动端左右文字布局

左右布局，右边内容可以一直增加，左边保持不动，如下图：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style&
复制链接

扫一扫