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

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/

您还可以通过finx css方式清除浮动元素：

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

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