<!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">
<head>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
#top-right {
width:60px;
height:30px;
border:20px solid #f3c3f3;
padding:40px;
background-color:#eee;
float:left;
}
#top-left {
width:60px;
height:30px;
border:20px solid #f3c3f3;
padding:40px;
background-color:#eee;
}
#content {
width:120px;
border:40px solid #f3c3f3;
padding:80px;
}
</style>
</head>
<body>
<div id="top-right">aaa</div>
<div id="top-left">aaa</div>
<div id="content">bbb</div>
</body>
</html>
用IE浏覽器打開上面的網頁文檔，發現上面的左右兩個div塊并沒有緊密相鄰，而是中間有個3px的縫隙，去掉css中的那條注釋語句，問題就解決了。
在css中加上如下的語句 ：
body {
width:360px;
margin:0px auto;
}
可以實作兩欄的自動居中，且不受浏覽器改變大小的影響。
轉載于:https://www.cnblogs.com/javaEEspring/archive/2007/10/07/2522950.html
![美團彈性伸縮系統的技術演進與落地實踐[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)