Html 宽度问题：边界为50%时！=无（CSS）

宽度问题：边界为50%时！=没有

看一看

结果应该是这样

---

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

有几种方法可以解决这个问题。您可以在两个元素上都设置

宽度：49%

，或者在第一个元素上设置

宽度：50%

，在第二个元素上设置第二个元素以占据其余元素。
如果两个元素占用的空间必须完全相等，则可以将它们包含在各自的

div

中。这些div将没有边框/边距/填充，只占用50%的空间，边框将在内部元素上指定

作用中的最后一个方法：

---

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

不要忘记考虑这些边距（以显示浅灰色区域），并且不能使用高度：100%，原因与不能使用宽度：50%（如其他人所述）相同。

边框会扩展框

50%+边界>50%

您必须减小宽度：

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

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

---

您可以将两个宽度为50%的元素并排放置，然后在每个元素内部放置另一个必须留有边距和边框的元素：

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

有一个简单的方法： 在附件中添加{box size:border box；}

---

50%的宽度也将包含边框

简单有效。无需额外元素，这是今天的正确答案。这里可以看到演示和解释。旧IE习惯于显示框大小：边框框