如何防止divs換行換行

我有一系列框，其中第一個是3 *（+頁邊距）大於其餘。他們應該排隊在一個很好的網格像這樣。如何防止divs換行換行

 
+ + + = = 
+ + + = = 
+ + + = = 
= = = = =

然而就是我得到的是

 
+ + + = = 
+ + + = = 
+ + + = = 
     = = 
= = =

的箱是所有div，沒有容器。這裏是他們的CSS

.userBox { 
    border: 4px solid #FFF; 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    -o-border-radius: 4px; 
    border-radius: 4px; 
    margin: 20px; 
    float: left; 
}

See a live example of what i'm doing

來源

2011-10-06 rlemon

你需要考慮的墊襯以及..（如果您發現真的很不錯，你的大框不會在底部與個位旁邊對齊它..）

這樣的大框的高度應該是396，而不是400 ..

那是因爲你的箱子是

每一個100px（高度）+ 8px（邊框）。全部三種= 324px
它們之間有40px（邊距）。共有兩種= 80px
一起= 404px
你的機器需要是404px（包括8像素邊界），所以它應該是396px高度..

看一看http://jsfiddle.net/gaby/yAzQA/5/

順便說

你可以用CSS只（做它的現代瀏覽器）

.userBox { 
    border: 4px solid #FFF; 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    -o-border-radius: 4px; 
    border-radius: 4px; 
    margin: 20px; 
    float: left; 
    height:100px; 
    width:100px; 
} 
.userBox:first-child{ 
    width:396px; 
    height:396px; 
}

演示在http://jsfiddle.net/gaby/yAzQA/14/

來源

2011-10-06 22:42:54

非常感謝！ – rlemon

blah beaten :)剛剛發表評論，說爲什麼要用CSS來輕鬆地用CSS做一些事情:) – Jared

當我增加了一個額外的2px較小.userBox它非常完美的高度。

還將此添加到.userBox以及固定爲：「padding：1px 0;」

來源

2011-10-06 22:44:06

我改變高度爲396，它工作正常。

$(".userBox").css({height: 100, width: 100}).filter(":first").css({height: 396, width: 400});

來源

2011-10-06 22:48:44 Gustavo

如何防止divs換行換行

回答

相關問題