1px边框弄乱了100％宽度拆分页面[重复]

Question

这个问题在这里已有答案：

• CSS: Width in percentage and Borders 4个答案

所以我想要80％页面红色，20％页面蓝色。有用。

但是，如果我向它们中的任何一个添加1px边框，它就会毁了。

 .left {
        float:left; 
        width: 80%;
        background-color: red;
        height: 400px;
        border-right:1px solid black;

    }

.right {
float: right;
    background-color: blue;

    height: 400px;
    width: 20%;
}

的jsfiddle：http://jsfiddle.net/38w4pLg0/

我可以在没有破坏的情况下拥有边界吗？

Answer 1

box-sizing: border-box

---

在框中设置此属性。现在，框的总大小将包括边框。

默认情况下，此属性设置为content-box，它仅计算框的内部 - 填充+边框从计算中排除。

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

---

您的问题示例：

.left {
    box-sizing: border-box;
    border-right: 1px solid black;
}

或者，首选，为所有框添加一个新类：

.box {
    box-sizing: border-box;
}

Answer 2

添加了box-sizing: border-box;

它做了什么它不会让边框添加宽度/高度到框并将其包含在内部。

的jsfiddle：

http://jsfiddle.net/38w4pLg0/6/