如何防止div包装到新行

Question

我有一系列框，其中第一个是比其余部分大3 *（+边距）。他们应在一个漂亮的网格中排队。

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

然而，我得到的是

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

框都是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

Answer 1

你也需要考虑填充...（如果你注意到真的很好，那么你的大盒子底部不会与旁边的那些对齐.. ）

所以大盒子的高度应该是396而不是400 ..

那是因为你的盒子是

• 每个100px（高度）+ 8px（边框）。全部三个= 324px
• 他们之间的40px（边距）。所有两个= 80px
• all together = 404px
• 你的盒子需要是404px（包括8px边框），所以它的高度应该是396px ..

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

---

顺便说一下

您只能使用CSS（ for modern browsers ）

.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/

演示

Answer 2

当我在较小的.userBox的高度添加额外的2px时，它工作得很好。

同样将此项添加到.userBox中： “padding：1px 0;”

Answer 3

我将身高改为396，效果很好。

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