左头像右边2行文本

最新推荐文章于 2022-08-14 11:05:28 发布

小橙几

最新推荐文章于 2022-08-14 11:05:28 发布

阅读量198

点赞数

分类专栏：笔记文章标签： html5 css html

本文链接：https://blog.csdn.net/weixin_42174938/article/details/120763146

版权

笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

实现效果
在这里插入图片描述

code

<html lang="">
    <body>
        <div class="box">
            <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fgaitaobao2.alicdn.com%2Ftfscom%2Fi3%2F3405278688%2FO1CN01izE1Eb2E39VGjxEcq_%21%213405278688.jpg_300x300.jpg&refer=http%3A%2F%2Fgaitaobao2.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636782832&t=32ea468c1f9a5ec8b4f8a8a12cde7162">
            <div>
                <p>user name</p>
                <span>update time</span>
            </div>
        </div>
        
    </body>
    <style>
       p {
        margin: 0;
    }
        .box {
            display: flex;
            justify-content: space-between;
            height: 100px;
            width: 400px;
            background-color: #FFD50F;
        }
        .box img {
            width: 100px;
            height: 100px;
            margin-right: 10px;
            border-radius: 50%;
        }
        .box div {
            width: 100px;
            height: 100px;
        }
        .box p {
            height: 50px;
            font-size: 20px;
            background-color: pink;
            vertical-align: top;
        }
        .box span {
            display: flex;
            align-items:flex-end;
            height: 50px;
            font-size: 16px;
            background-color: green;
        }
        
        
    </style>
</html>