宽度问题：边框时为50％！=无（CSS）

Question

宽度问题：当border！= none

时为50％

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

结果应该是这样的

Answer 1

你可以将两个元素放在50％宽的彼此旁边，然后你可以在每个元素里面加上边距和边框：http://jsfiddle.net/5nYSf/47/

Answer 2

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

有几种方法可以解决这个问题。您可以在两个元素上都有width:49%，或者先在width:50%上使用div，然后在第二个元素中使用{{1}} 如果两个元素必须占用完全相等的空间，则可以将每个元素包含在自己的{{1}}中。这些div将没有边框/边距/填充，占据空间的50％，并且将在内部元素上指定边框。

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

Answer 3

如果边框是固定宽度，则可以使用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 4

有一种简单的方法： 添加{box-sizing：border-box;在.attachments中 50％的宽度也包含边框

Answer 5

边框是定义宽度的补充，因此50％+ 50％+ 3px边框（两边）最终为100％+ 12px，比包含元素（100％）大12px。尝试使用49％或一些其他测量值，这将留下12px的边界。

Answer 6

不要忘记考虑这些边距（显示浅灰色区域）并且你不能使用高度：100％因为你不能使用宽度的原因：50％（正如其他人所描述的那样） ）

Answer 7

边框会展开框。

50％+边框＆gt; 50％

你必须减小宽度：

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

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