1

我有盒子漂浮在一个类似于 SO Chat 的 div 中，除了我正在为我自己的网站制作一个盒子，用户可以在其中创建自己的聊天室，页面上的这些盒子代表聊天室，我想为它们制作一个完美的宽度所以它们将完全适合页面，而边缘没有任何多余的空间。它们所在的主要 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;
}
4

2 回答 2

2

您可以使用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事实证明，使用marginon也很容易.Inner。

jsFiddle

.ChatRoom {
    float:left;
    width:25%;
    height:200px;
}
.ChatRoom .Inner {
    border:1px solid #666;
    margin:8px;
    background-color:#FFF;
    cursor:pointer;
    height:100%;
}
于 2013-03-29T02:40:31.547 回答
1

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

最后一个 div 需要重置边距，否则它将添加到 15px 的填充。我通过给它class="last并制作.ChatRoomdiv 225px 来做到这一点；这将为您提供适当的间距。

您还可以将 div 放在无序列表中，并使用 li:last-child 定位最后一个 div 并以这种方式删除边距。

于 2013-03-29T02:47:05.443 回答