css 左边头像右边描述

CSS是前端开发中重要的一部分，我们可以通过CSS实现很多漂亮的效果。今天我们就来看看如何实现左边头像右边描述的效果。

.container{
    display: flex;
    align-items: center;
    gap: 20px;
}
.avatar{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
}
.description{
    font-size: 18px;
    color: #333;
}
    

我们通过flex布局将头像和描述放在同一行，并且使用gap属性控制它们之间的间距。

头像部分我们设置了宽度和高度，并且使用border-radius属性将其变为圆形。object-fit属性用来控制图片的填充方式，cover表示铺满容器并剪裁多余的部分。

描述部分我们设置了字体大小和颜色。

通过以上代码，我们可以很方便地实现左边头像右边描述的效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！