在實際開發中，很多情況下需要多個div有間隙的併排顯示，下面是我總結的幾種方法。
這是我們要實現的效果圖
首先，根據要實現的效果圖，寫出html。
**投資業務，指銀行購買有價**的活動
立即諮詢
**投資業務，指銀行購買有價**的活動
立即諮詢
**投資業務，指銀行購買有價**的活動
立即諮詢
**投資業務，指銀行購買有價**的活動
立即諮詢
*
.w960
body
.service h3
.service .yw
.service dl dt
.service dl dd
.service .yw a
此時，四個盒子並沒有在一行併排顯示，原因是因為div是塊級元素，塊級元素獨佔一行。這時就需要用浮動，讓四個div併排顯示（即在.service .yw裡面加上float:left;）。看一下效果圖。
此時，前三個盒子正常顯示，第四個盒子還在下面。原因是：大盒子service的寬度是960px，四個div寬度都是225px，四個div的margin-right是20px。225*4+20*4=980px。980px>960px。此時，需要去掉最後乙個div的margin-right（即在css**中加入.service .last。此時，便可以正常顯示了。
除了用浮動讓四個div併排顯示，還可以使用inline-block。給.service .yw加上displayi:nline-block;使用inline-block有幾個問題。
a.盒子中有文字並沒有對齊。
解決辦法：vertical-align:top;
b.盒子與盒子之間有間隙。（原因：**換行造成的間隙。）
解決辦法：①去掉換行。
②給四個div最外層包乙個div，並設定font-size:0;
此時，四個小盒子裡的字型受到影響。這需要我們單獨給四個小盒子設定字型大小。（即給.service .yw加上font-size:16px;）。
注意：我們要給css**加上*display:inline;*zoom:1;這行**是為了相容ie的。此時就可以正常顯示了。
可以把最後乙個盒子margin-right設定為0，解決問題。同樣也可以使用margin為負值的辦法解決。這時需要給四個盒子的外層包乙個div。如果我們不給這個盒子設定寬度，它的寬度預設是auto，表現貪婪性，會佔父元素的100%。給這個新加的盒子設定margin-right:-20px;後，他會增加盒子的寬度，增加到980px，保證了width + margin-right =960px。此時，頁面便可以正常顯示了。
HTML中快速實現div盒子有間隙併排三個小方法
div盒子併排顯示在各大網頁中是很尋常的頁面效果，但是實現這種效果的方法確不止一種 方法一 使用float 原本的浮動之後再設定外邊距，外層盒子的寬度會不夠導致最後乙個盒子在第二排顯示 為什麼不顯示？原因 父元素 660px 150px4 20px4 680px 因此還需要再重新定義最後乙個盒子的右...
讓兩個Div併排顯示
一 使用display的inline屬性 aaaa bbbb 二 通過設定float來讓div併排顯示 1111 2222 2222 2222 三 對於兩個div併排，左邊為絕對寬度，右邊為相對寬度的，需要用到這種布局的情況比較多見，如左邊為導航，右邊為內容的頁面 1 將最大的容器padding l...
讓兩個Div併排顯示
一 使用display的inline屬性 html divstyle width 300px height auto float left display inline aaaa div divstyle width 300px height auto float left display inli...