Question

我有一些像SO聊天那样漂浮在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;
}

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上的margin，使用.Inner也很容易。

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并以此方式删除边距。

完美适合Div的完美宽度

2 个答案:

没有`border-box`

完美适合Div的完美宽度

2 个答案:

没有border-box

没有`border-box`