html - 使用百分比宽度将两个 div 并排居中对齐到页面

Question

请引用下面的代码

<div id="root">
<div id="child1">xxxx</div>
<div id="child2">yyyy</div>
</div>

样式:

#root
{
    width:100%
    margin:0 auto;
}
#root div
{
    width: 50%;
    float:left; 
    border: 1px solid red;
}

fiddle :

http://jsfiddle.net/33Fzu/133/

我知道我们可以使用“像素”将 div 中心与页面对齐。但我想通过百分比宽度概念来做到这一点。

我如何通过百分比宽度概念对齐 div，这需要在 IE8、IE9 和 chorme 浏览器中以各种分辨率工作。

如果我将根宽度设置为 80% 或 90%，那么对于特定分辨率的机器，div 居中但其他分辨率不起作用。

我如何设置百分比宽度以在所有类型的分辨率下将 div 居中对齐

谢谢，

Answer 1

您需要将 box-sizing 更改为 border-box 以将边框包含在元素的宽度内:

#root div {
    ...
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

JSFiddle demo.

-moz--prefixed 版本适用于 Firefox，因为 Firefox 不支持默认的 box-sizing 属性。但是，这确实适用于 IE8。