Question

请参阅以下代码

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

css：

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

小提琴：

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

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

如何在各种分辨率的IE8，IE9和chorme浏览器中通过百分比宽度概念对齐div。

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

如何设置宽度（以百分比表示）以将div对齐所有类型的分辨率

谢谢，

Answer 1

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

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

JSFiddle demo.

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

Answer 2

试试这个小提琴链接： http://jsfiddle.net/neharikapadala/33Fzu/155/

#root
{
    width:60%;
    margin:0 auto;
    padding-left:20%;
    padding-right:20%;
}

#child1
{
    width:50%;
    float:left;
    text-align:center;
    background-color:red

}
#child2
{
    width:50%;
    float:left;
    text-align:center;
    background-color:green
}

Answer 3

您可以按照以下方式执行此操作：

CSS可以是这样的：

#root
{
    width:100%;
    margin:0 auto;
}

#child1
{
    width:50%;
    float:left;

}
#child2
{
    width:50%;
    float:left;
}

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

3 个答案: