1px 边框搞乱了 100% 宽度的分页

Question

所以假设我想要 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;
}

或者，首选，为所有方框添加一个新的 class：

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

Answer 2

已添加box-sizing: border-box;

它的作用是不会让边框将 width/height 添加到框内并将其包含在里面。

jsfiddle：

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