CSS 樣式表是前端開發(fā)中重要的一部分，其中圖片和文字布局是常見的頁面布局方式。一種常見的左右布局是在網(wǎng)頁中使用圖片右側(cè)是文字，或者文字右側(cè)是圖片的形式。下面介紹一下如何使用 CSS 樣式表實(shí)現(xiàn)這種圖文布局。

<style type="text/css">
.container{
overflow: hidden;
}
.left-image{
float: left;
margin-right: 20px;
}
.right-text{
float: left;
}
</style>

需要注意的是，在這種布局中，圖片和文字都需要放在同一個(gè) div 容器中。給容器設(shè)置一個(gè)固定寬度，超出部分使用 overflow: hidden 隱藏。

<div class="container">
<img src="left-image.jpg" class="left-image">
<p class="right-text">這里是文字區(qū)域。</p>
</div>

在樣式表中，給圖片設(shè)置 float: left 和 margin-right 為 20px，讓它在容器左側(cè)浮動(dòng)，并留出一定的間距。給文字區(qū)域設(shè)置 float: left，讓它在圖片右側(cè)浮動(dòng)。

這樣就可以實(shí)現(xiàn)一個(gè)簡(jiǎn)單的圖文布局了。