在CSS中,我們可以使用浮動(dòng)(float)屬性來(lái)設(shè)置文字環(huán)繞圖片,以下是一些示例代碼:
1、圖片在左側(cè),文字在右側(cè):
img { float: left; margin-right: 10px; }
2、圖片在右側(cè),文字在左側(cè):
img { float: right; margin-left: 10px; }
這些代碼將圖片設(shè)置為浮動(dòng),并根據(jù)需要添加了一些外邊距(margin)來(lái)調(diào)整圖片和文字之間的空間,你可以根據(jù)自己的需求調(diào)整這些樣式。
如果你使用的是HTML5的figure元素來(lái)包含圖片和描述,那么可以使用CSS的figure-caption
屬性來(lái)設(shè)置文字環(huán)繞圖片。
figure { display: flex; align-items: center; justify-content: flex-start; } figure > * { max-width: 100%; } figure > figcaption { text-align: left; max-width: 100%; }
這些代碼將圖片和描述元素設(shè)置為一個(gè)flex容器,并使描述元素(figcaption
)位于圖片的下方,且文字左對(duì)齊,你可以根據(jù)需要調(diào)整這些樣式來(lái)實(shí)現(xiàn)不同的布局效果。