宽度问题：当边框 != none 时为 50% (CSS)

Question

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

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

结果应该像这样

Answer 1

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

Answer 2

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

Answer 3

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

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

最后一个正在运行的方法：
http://jsfiddle.net/5nYSf/35/

Answer 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/

Answer 5

边框是除了定义的宽度之外的，因此 50% + 50% + 3px 边框（两侧）最终为 100% + 12px，比包含元素 (100%) 大 12px。尝试使用 49% 或其他一些尺寸，为边框留出 12 像素。

Answer 6

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

Answer 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;
}