在設計網頁布局時，經常需要將兩個CSS框左右排列。這在網頁布局的實現中相當常見，例如在導航欄和內容區域之間的布局中。下面我們將介紹兩種實現方法。

.left {
float: left;
width: 50%;
}
.right {
float: right;
width: 50%;
}

方法一：使用float屬性

首先，我們需要為左側和右側框分別定義寬度，并通過float屬性將它們兩側浮動，比如讓左側框向左浮動，右側框向右浮動。我們可以通過以下的代碼來實現：

<div class=“left”>
<p>這是左側框</p>
</div>
<div class=“right”>
<p>這是右側框</p>
</div>

方法二：使用inline-block屬性

其次，我們可以使用inline-block屬性。這種方法在實現上更加簡單，同時也不存在一些原本與float屬性相關的細節問題。

.left {
display: inline-block;
width: 50%;
*display: inline;
*zoom: 1;
}
.right {
display: inline-block;
width: 50%;
*display: inline;
*zoom: 1;
}

在這種方法中，我們同樣需要為兩個框設置寬度，接著使用display:inline-block屬性將它們變為內聯元素（inline element），然后將其水平縮放。在這個過程中有一個問題需要注意，那就是某些瀏覽器并不支持inline-block屬性，因此我們需要使用以星號開頭的CSS hack來兼容這些舊版瀏覽器。