<style type="text/css">
#box1,#box2{
 
 float:left;
 width:200px;
 height:300px;
 color:#ffffff;
 font-size:36px;
 text-align:center;
 line-height:300px;
}
#box1{
 border:solid 5px #ff0099;
 background-image:url('bg2.jpg');
}
#box2{
 border:solid 5px #ffff00;
 background-image:url('bg3.jpg');
}

</style>
XHTML結(jié)構(gòu)如下：

<div id="box1">
 左欄
</div>
<div id="box2">
 右欄</div>

運(yùn)行結(jié)果：



現(xiàn)在，我們想把左右兩欄位置互換一下，只需把
<div id="box1">
 左欄&nbsp;&nbsp;&nbsp;
</div>
<div id="box2">
 右欄</div>

換成：
<div id="box2">
 右欄</div>
<div id="box1">
 左欄&nbsp;&nbsp;&nbsp;
</div>
即可。
但是，當(dāng)頁面很復(fù)雜時(shí)，各種標(biāo)簽相互嵌套，代碼成百上千行，這個(gè)看似簡(jiǎn)單的位置調(diào)換，可能需要花上很長(zhǎng)的時(shí)間，也并一定能達(dá)到需要的效果，現(xiàn)在，我們換一種思路來實(shí)現(xiàn)：
#box1{
 border:solid 5px #ff0099;
 background-image:url('bg2.jpg');
 margin-left:105px;
 
}
#box2{
 border:solid 5px #ffff00;
 background-image:url('bg3.jpg');
 margin-left:-420px;

運(yùn)行后：