如何防止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换行换行

回答

相关问题