margin與一欄定寬的兩欄自適應佈局實例

HTML：

<h4>左側固定</h4>
<div class="box box-left">
    <img src="1.jpg" class="img">
    <p>DOM文檔流中，圖片定寬在左側，文字內容在右側，和視覺呈現的前後順序一致。</p>
</div>

<h4>右側固定-DOM順序相反</h4>
<div class="box box-right">
    <img src="1.jpg" class="img">
    <p>DOM文檔流中，圖片定寬在左側，視覺上卻在右側，順序表現不一致。</p>
</div>

<h4>右側固定-DOM順序和視覺一致</h4>
<div class="box box-right-same">
    <div class="full">
        <p>DOM文檔流中，圖片定寬在右側，視覺呈現也在右側，順便表現此時一致。</p>
    </div>
    <img src="1.jpg" class="img">
</div>

CSS:

.box {
    overflow: hidden;
}
.img {
    width: 128px; height: 96px;
}
/* 左浮動 */
.box-left > img {
    float: left;
}
.box-left > p {
    margin-left: 140px;
}
/* 右浮動，但圖片DOM在前 */
.box-right > img {
    float: right;
}
.box-right > p {
    margin-right: 140px;
}
/* 右浮動，圖片DOM在後，和視覺表現一致 */
.box-right-same > .full {
    width: 100%;
    float: left;
}
.box-right-same > .full > p {
    margin-right: 140px;
}
.box-right-same > img {
    float: left;
    margin-left: -128px;
}