24% 宽度的 4 列 DIV 不会一直延伸到我的 100% 屏幕宽度 div答案

【问题标题】：4 column DIVs at 24% width won't extend all the way across my 100% screen width div24% 宽度的 4 列 DIV 不会一直延伸到我的 100% 屏幕宽度 div
【发布时间】：2012-11-19 05:04:21
【问题描述】：

谁能告诉我为什么右下角的“安全专家”不会一直延伸到屏幕右侧？我正在使用 Eric Meyer 的重置。我不知道为什么那里有那个填充物。

http://hemakessites.com/mayukh/22/

编辑：你们看到的是右下角的巨大空间，对吧？这不是3%的银子。我会尝试将它们包装在一个 div 中，因为现在如果我将它们全部设置为 25%，其中一个会落到下一行。

旁白：天啊。我刚刚用分号完成了一个句子；我编程太多了；

更新：已经有一个 div 容器可以拉伸 100%。这就是灰色地带。不……这是一个比我们想象的要糟糕得多的邪恶。也许这与修复了“差异”div有关？

【问题讨论】：

一个好答案和两个补丁 :) 有时人们回答得太快了！

标签： css html padding reset

【解决方案1】：

您可以将box-sizing 属性用于您的解决方案，我希望这对您有用

请用我的 css

更新你的 css

.slagline {
    -moz-box-sizing: border-box;
     box-sizing:border-box;
    -webkit-box-sizing:border-box;
    border-color: #FFFFFF #666666 #CCCCCC #CCCCCC;
    border-style: solid;
    border-width: 1px;
    float: left;
    height: 100%;
    width: 25%;
}

其实最主要的是你已经定义了border-width:1px;，所以它增加了你所有四列的宽度，所以通过box-sizing属性你可以获得你想要的结果

如果您要删除box-sizing，请查看demo，您会知道其中的区别...

【讨论】：

@TylerLangan 嘿，我只是想解决你的问题 :-) 我在这里学到的东西我和你分享了，所以不要给我这么多的名称 :-) 我什么都不是.....很高兴为您提供帮助.....

【解决方案2】：

因为您在它们上设置了float: left，并且正如您所说，您给了它们 24% 的宽度。您体验到的填充是剩余的 4%。使最后一个浮动：向右或将边距/填充应用于所有框。

如果您因为边框问题而设置 24%，我建议创建例如一个 div，将您的内容包装在浮动块中。因此，您可以将当前块的宽度设置为 25%，然后它们会相应地扩展。

【讨论】：

【解决方案3】：

<div id="slg4">

需要设置为float:right;

【讨论】：

【解决方案4】：

这应该可以解决问题：

<div style="width:27%;" class="slagline" id="slg4">

【讨论】：