完全适合Div的完美宽度

Question

我有一些盒子漂浮在div里面，有点像SO Chat，除了我正在为我自己的网站制作一个盒子，用户可以在那里建立自己的聊天室，这些盒子在页面上代表聊天室，我想为它们做一个完美的宽度，这样它们就可以准确地放在页面上，而不会有任何多余的空白处。它们所在的主要div是965px，左右两侧的填充为15px，宽度为935px。我将宽度从965px减少到935px，以保持965px的总宽度。

要了解我的场景，请查看A Fiddle

正如你所看到的，在div的右端留下了一些空格，我不希望这样，我希望聊天框完全适合像素的全宽，并记住要考虑到边框也算宽度。如果有人能帮我，那就太好了！

CSS样式

body {
    width:1000px;
}

#Body {
    width:935px;
    padding:15px;
    height:500px;
    background-color:#F1F1F1;
    margin:0 auto;
}
.ChatRoom {
    float:left;
    width:223px;
    height:200px;
    border:1px solid #666;
    cursor:pointer;
    margin-right:8.75px;
    background-color:#FFF;
}
.ChatTitle {
    width:100%;
    height:30px;
    line-height:30px;
    font-size:13px;
    font-weight:bold;
    text-align:center;
    background-color:#C6D6D9;
    border-bottom:2px solid #9C0;
}

Answer 1

您可以使用box-sizing:border-box来完成此任务。它所做的是从宽度中包含padding和border大小，而不是正常的添加行为(这会使<div>溢出到下一行)。我在这里添加了一个div.Inner，它将具有边框和白色背景，而.ChatRoom用于使用padding提供空间。

jsFiddle

HTML

<div class="ChatRoom">
    <div class="Inner">
        <div class="ChatTitle">My Chat Room</div>
    </div>
</div>

CSS

.ChatRoom {
    float:left;
    width:25%;
    height:200px;
    padding:8px;
    box-sizing:border-box;
}
.ChatRoom .Inner {
    border:1px solid #666;
    box-sizing:border-box;
    background-color:#FFF;
    cursor:pointer;
    height:100%;
}

不使用border-box

事实证明，在没有border-box的情况下，在.Inner上使用margin也很容易。

jsFiddle

.ChatRoom {
    float:left;
    width:25%;
    height:200px;
}
.ChatRoom .Inner {
    border:1px solid #666;
    margin:8px;
    background-color:#FFF;
    cursor:pointer;
    height:100%;
}

Answer 2

http://jsfiddle.net/DyTT8/1/

最后一个div需要重置页边距，否则将增加15px的填充。为此，我给它设置了class="last并创建了.ChatRoom div 225px；这将为您提供适当的间距。

您还可以将div放在一个无序列表中，并以li: last -child作为最后一个div的目标，这样就删除了空白处。