css - 两列布局 - 容器的最大宽度

Question

我有一个两列布局：http: //jsfiddle.net/KqQ42/1/

现在我希望左右列都共享最大宽度，以便 page_wrapper 和列之间现在有空间。

当我只在宽度上增加百分之一时，它们就不再并排了。

那么诀窍是什么？

Answer 1

像这样写：

.content_wrapper > div
{
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}
.nav{
 width:25%;
}

检查这个http://jsfiddle.net/KqQ42/7/

Answer 2

您的问题是您在两列上声明的 1px 边框。浏览器的盒子模型将边框与您声明的宽度相加，如果您删除边框声明并将宽度设置为总计 100%，您将不会再遇到任何问题

或者，您可以使用 css 属性box-sizing: border-box; http://paulirish.com/2012/box-sizing-border-box-ftw/

您还可以使用纯 css 方法清除浮动元素：

http://css-tricks.com/snippets/css/clear-fix/

而不是在标记中使用额外的 div 来执行此操作