CSS是前端開發(fā)中重要的一部分，我們可以通過CSS實(shí)現(xiàn)很多漂亮的效果。今天我們就來看看如何實(shí)現(xiàn)左邊頭像右邊描述的效果。

.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屬性控制它們之間的間距。

頭像部分我們設(shè)置了寬度和高度，并且使用border-radius屬性將其變?yōu)閳A形。object-fit屬性用來控制圖片的填充方式，cover表示鋪滿容器并剪裁多余的部分。

描述部分我們設(shè)置了字體大小和顏色。

通過以上代碼，我們可以很方便地實(shí)現(xiàn)左邊頭像右邊描述的效果。