今天在做一個靜態頁面時，頭部的廣告條是很大一張圖片，考慮到網頁訪問時的加載速度，因此需要把一幅圖拆成幾個尺寸較小的圖片來作為背景圖，但是采用div來布局時，出現了div不能顯示在一行的情況，所以開始想到用display:inline-block來處理，這樣是顯示到一行了，但是兩個div之間有間隔，於是又想到直接用marg-left：-xxpx，將其拖過去，但是在一個瀏覽器中可以，一旦換了一個瀏覽器就不行了，特別是ie，才發現這種方法太不好了，於是，后來用了float方法來處理，不再用margin負值將其拖過去，直接上代碼：
不加float時：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
body{
margin:0;
padding:0;
}
.main{
width:600px;
overflow: hidden;
height:342px;
margin:0;
padding:0;
background: red;;
}
.cnt{
width:182px;
height:342px;
background: red;
display: inline-block;
}
.fst{
background: url(img/1.jpg) no-repeat;
}
.sec{
background: url(img/2.jpg) no-repeat;
}
.trd{
background: url(img/3.jpg) no-repeat;
}
</style>
</head>
<body>
<div class="main">
<div class="cnt fst"></div>
<div class="cnt sec"></div>
<div class="cnt trd"></div>
</div>
</body>
</html>
結果：
這是沒有向.cnt中添加float:left時結果，添加之后：如下所示：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
body{
margin:0;
padding:0;
}
.main{
width:600px;
overflow: hidden;
height:342px;
margin:0;
padding:0;
background: red;;
}
.cnt{
width:182px;
height:342px;
background: red;
display: inline-block;
float: left;
}
.fst{
background: url(img/1.jpg) no-repeat;
}
.sec{
background: url(img/2.jpg) no-repeat;
}
.trd{
background: url(img/3.jpg) no-repeat;
}
</style>
</head>
<body>
<div class="main">
<div class="cnt fst"></div>
<div class="cnt sec"></div>
<div class="cnt trd"></div>
</div>
</body>
</html>
結果為：
如果是豎着排列的兩個div，為了消除他們之間的間隔，可以使用div{margin:0;padding:0}來進行設置，因為每個瀏覽器都有一套自己的方式來解析網頁，div內部存在着內邊距和外邊距，所以可以先清除邊距來消除div之間的間隔。