完全适合 Div 的完美宽度答案

【问题标题】：Perfect Width To Fit Div Exactly完全适合 Div 的完美宽度
【发布时间】：2013-03-19 18:05:54
【问题描述】：

我有一些盒子漂浮在一个类似于 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;
}

【问题讨论】：

哪个div右边的空格？
应该说'制作 995px 宽度？'
不，我希望居中的 div 为 965 像素，所以我添加了填充并使它变大了，所以我减去了左侧和右侧的总填充
这就是为什么浮动在这种布局中并不理想。浮动从流中移除一个元素，并将其放置在容器中尽可能左或右的位置。

标签： html css layout padding percentage

【解决方案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%;
}

【讨论】：

box-sizing is not supported in ie8 and other browsers 还有其他选择吗？谢谢你的回答！
已更新，没有border-box 可能更容易：P

【解决方案2】：

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

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

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

【讨论】：

没有border-box

没有`border-box`