一般我們在一個外圍DIV內針對兩個DIV分別使用float 浮動屬性（float:left（局左）、float:right（居右））來解決此問題。
這樣的布局一般總的寬度一定，只需左、右內容DIV寬度設置小於總寬度即可實現，
注意的是一個DIV的寬度計算公式是：自己設置寬度+邊框寬度（border）+padding寬度+margin寬度組成。
左右DIV的距離為：外圍DIV寬度-左邊DIV寬度-右邊DIV寬度
提示：在DIV CSS制作中很多時候需要計算的如這樣的布局。
效果如圖所示：
代碼為：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<style type="text/css">
<!--頁面內容距離瀏覽器頂端及左邊空隙為0-->
html, body {
margin: 0;
padding: 0;
}
#Box{
width:200px;
height:72px;
background-color:#666;
}
<!--Box-a的寬度為50+5(margin-left)+2(左右border寬度和)=57-->
#Box-a{
float:left;
width:50px;
border:1px solid #999;
height:60px;
background-color:#00F;
margin-left:5px;
margin-bottom:5px;
margin-top:5px;
}
<!--Box-b的寬度為120+5(margin-right)+2(左右border寬度和)=127-->
#Box-b{
float:right;
width:120px;
border:1px solid #999;
height:60px;
background-color:#F03;
margin-right:5px;
margin-top:5px;
margin-bottom:5px;
}
</style>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DIV+CSS 讓左右結構內容之間有一定距離</title>
</head>
<body>
<!--外圍的DIV-->
<div id="Box">
<div id="Box-a"></div><!--左邊的DIV-->
<div id="Box-b"></div><!--右邊的DIV-->
</div>
</body>
</html>
分別計算出Box-a和Box-b的寬度后，可得Box-a與Box-b之間的寬度為200-57-127=16px.
推薦一個自己業余時間開發的網盤搜索引擎，360盤搜（www.360panso.com）