宽度问题：50% 当边框！= 无（CSS）答案

【问题标题】：problem with width:50% when border != none (CSS)宽度问题：50% 当边框！= 无（CSS）
【发布时间】：2017-11-13 15:36:33
【问题描述】：

当边框 != none 时出现宽度问题：50%

看看 http://jsfiddle.net/5nYSf/

结果应该是这样的

【问题讨论】：

标签： html css width border

【解决方案1】：

您可以将两个 50% 宽的元素并排放置，然后您可以在每个元素中放置另一个具有边距和边框的元素：http://jsfiddle.net/5nYSf/47/

【讨论】：

简单有效。

【解决方案2】：

有一个简单的方法：添加{框大小：边框框； } 在 .attachments 中并且 50% 的宽度也将包含边框

【讨论】：

不需要额外的元素，这是今天的正确答案。演示和解释可以在这里看到developer.mozilla.org/en-US/docs/Web/CSS/box-sizing。旧的 IE 曾经表现出盒子大小：border-box

【解决方案3】：

诀窍是，边框和边距不包括在高度/宽度计算中。因此，如果您有宽度为 100px、边框为 2px、左边距为 10px 的元素，则将占用 114px 的水平空间。（边界计算两次：左右。）IIRC，填充也不包括在内，但我不确定。

有几个选项可以解决这个问题。您可以在两个元素上使用width:49%，或者在第一个元素上使用width:50%，然后在第二个元素上使用其余元素。
如果两个元素必须占用完全相同的空间，您可以将每个元素包含在其自己的div 中。这些 div 将没有边框/边距/填充，并且恰好占据 50% 的空间，并且将在内部元素上指定边框。

最后一种方法：
http://jsfiddle.net/5nYSf/35/

【讨论】：

【解决方案4】：

如果您的边框是固定宽度，您可以使用 CSS 中的 calc() 函数从元素宽度中减去边框长度。

.attachments {
height:80px;    
background-color:#E4E4E4;
}

.attachments span {
float:left;
height:100%;
width:calc(50% - 6px);
background-color:#9FB9CA;
border:3px #879AA8 solid;
}

http://jsfiddle.net/5nYSf/277/

【讨论】：

【解决方案5】：

边框是定义宽度的补充，所以 50% + 50% + 3px 边框（两侧）最终为 100% + 12px，比包含元素（100%）大 12px。尝试使用 49% 或其他一些会为边框留下 12 像素的测量值。

【讨论】：

【解决方案6】：

不要忘记考虑这些边距（以显示浅灰色区域）并且您不能使用 height:100% 的原因与您不能使用 width:50% 的原因相同（正如其他人在此处所述)

【讨论】：

【解决方案7】：

边框扩大了盒子。

50% + 边框 > 50%

你必须减小宽度：

.attachments {
    height:80px;    
    background-color:#E4E4E4;
}

.attachments span {
    display:inline-block;
    height:100%;
    width:48%;
    background-color:#9FB9CA;
    border:3px #879AA8 solid;
}

【讨论】：