本文目錄導(dǎo)讀：

1. HTML結(jié)構(gòu)
2. CSS樣式
3. 響應(yīng)式設(shè)計

CSS布局：圖片居左，文字居右

在網(wǎng)頁設(shè)計中，我們經(jīng)常需要實現(xiàn)圖片與文字的布局，其中***常見的一種布局方式就是左邊圖片，右邊文字，這種布局方式不僅美觀，還能有效地展示內(nèi)容，下面，我們將探討如何使用CSS實現(xiàn)這種布局。

HTML結(jié)構(gòu)

我們需要在HTML中定義圖片和文字的容器，我們可以使用div元素來創(chuàng)建這些容器。

<div class="image-container">
    <img src="image.jpg" alt="示例圖片">
</div>
<div class="text-container">
    <p>這里是文本內(nèi)容。</p>
</div>

CSS樣式

我們使用CSS來定義這些容器的樣式，使圖片位于左側(cè)，文字位于右側(cè)，我們可以使用flexbox布局來實現(xiàn)這一點。

.image-container {
    width: 50%; /* 根據(jù)需要調(diào)整圖片容器的寬度 */
    float: left; /* 使圖片容器浮動到左側(cè) */
}
.text-container {
    width: 50%; /* 根據(jù)需要調(diào)整文字容器的寬度 */
    float: right; /* 使文字容器浮動到右側(cè) */
    margin-left: 1em; /* 為文字容器添加左邊距，使其與圖片容器保持一定距離 */
}

響應(yīng)式設(shè)計

為了使我們的布局在各種設(shè)備上都能良好地顯示，我們還需要考慮響應(yīng)式設(shè)計，我們可以使用媒體查詢來調(diào)整不同屏幕大小下的布局。

@media (max-width: 768px) { /* 當(dāng)屏幕寬度小于或等于768px時 */
    .image-container, .text-container {
        float: none; /* 移除浮動 */
        width: 100%; /* 使容器占據(jù)整個屏幕寬度 */
        margin: 0 auto; /* 使容器居中對齊 */
    }
}

通過以上步驟，我們就可以實現(xiàn)左邊圖片右邊文字的布局，在實際應(yīng)用中，我們還可以根據(jù)具體需求調(diào)整樣式和布局。