浮動DIV元素不排隊

我有浮動，所以他們並排顯示。這是我的代碼：浮動DIV元素不排隊

.serviceMembersPosition { 
    width: 190px; 
    float: left; 
    display: inline; 
    border: 1px solid #999; 
    margin: 5px 5px 5px 0; 
    padding: 5px; 
}

它的工作原理，但如果其中一個DIV的信息比其他人多，它填補了浮動。看看下面的截圖有什麼差距。有什麼辦法可以解決這個問題嗎？我正在使用JQuery和我的網站。也許有這樣的代碼？

alt text http://img532.imageshack.us/img532/1032/screenshot20100331at110.png

來源

2010-03-31 Ben Sinclair

您的問題似乎是一個換行問題。一些描述佔用兩行，而另一行佔用一行。嘗試使用可處理此問題的插件。

Setting Equal Heights with jQuery

來源

2010-03-31 13:49:24

因爲我的設計寬度流體不固定，把明確的：既每3個項目後，將無法正常工作，所以這是我必須去:)感謝所有答案的方式！ – 2010-04-01 00:15:14

爲了避免這種情況，你需要每一個「行」後清除浮動。

<div style="clear: both;"></div>

在您想要成爲當前行中最左邊的DIV之前插入一個像這樣的DIV。

來源

2010-03-31 13:06:19

你看到的是正常的行爲..

一個簡單的CSS技巧是clear:left每三個項目（因爲你必須每排3個箱）在CSS3

.serviceMembersPosition:nth-child(3n+1){clear:left;}

因爲很少瀏覽器支持css3你可以用jquery相當於

$('.serviceMembersPosition:nth-child(3n+1)').css('clear','left');

但仍IE無法正確渲染..

IE瀏覽器，你將不得不無論是在一個div包裹每一行，並設置overflow:auto它或把清理DIV/BR與具有clear:both

CSS規則每一行後

來源

2010-03-31 13:17:45

浮動DIV元素不排隊

回答

相關問題