圖文兩排CSS，即將兩部分內容分別排列在頁面中央的左右兩側，常用于網站的首頁、文章頁面等。這種布局方式用CSS實現起來非常簡單，代碼也比較好理解。

首先，我們需要用HTML將頁面的結構搭建好，包括左側和右側兩個區域。比如：

<div class="container">
<div class="left">
<img src="left-image.jpg" alt="">
</div>
<div class="right">
<h2>這里是標題</h2>
<p>這里是右側區域的內容...</p>
</div>
</div>

上面的代碼定義了一個.container容器，內部包含一個.left區塊和一個.right區塊。.left區塊中包含一張圖片，而.right區塊中則是一些文本內容。

接下來，我們需要用CSS來實現兩側區塊的排列。代碼如下：

.container {
display: flex;
justify-content: center;
align-items: center;
}
.left, .right {
width: 50%;
}
.left {
text-align: right;
margin-right: 10px;
}
.right {
text-align: left;
margin-left: 10px;
}

上面的代碼中使用了flex布局來將兩側區塊居中對齊。.left和.right區塊都設置為寬度為50%，這樣它們就會平分整個容器的寬度。另外，.left區塊使用了text-align:right樣式來將其內部的圖片靠右對齊，并且設置了一定的右邊距。.right區塊則是使用了text-align:left樣式，并且設置了一定的左邊距。

這樣，我們就完成了一個簡單的圖文兩排CSS布局。在實際的網頁開發中，我們常常會在這個基礎上進行一些調整和優化，比如增加一些響應式布局的樣式，或者調整圖片和文字的大小、位置等等。但是，這個基本的布局方式是不變的，也是很值得掌握的。