使用百分比宽度

请参考下面的代码对齐两个div并排中心页面使用百分比宽度

<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中心对齐到页面。但我想通过百分比宽度的概念做到这一点。

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

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

如何设置宽度百分比排列在中心的股利为所有类型的分辨率

致谢，

来源

2014-02-24 SivaRajini

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

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

JSFiddle demo.

的-moz- -PR efixed版本适用于Firefox，因为Firefox不支持默认的box-sizing属性。但是，这对IE8有效。

来源

2014-02-24 09:46:40

我不能让你的回答。我想div的内容是使用百分比宽度的中心，但你的答案与边界有关。？ – SivaRajini

我没有使用任何div边界只为你们理解的目的只有我把小提琴的边框颜色 – SivaRajini

看到这里的小提琴http://jsfiddle.net/33Fzu/146/ div内容是页面中心这就是我的问题 – SivaRajini

-1

如下你可以这样做：

的CSS可以是这样的：

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

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

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

来源

2014-02-24 09:58:41 Neharika

我需要将div内容并排居中对页。你的小提琴输出是不同的 – SivaRajini

你的小提琴输出是我现在得到的。我需要“XXXX”和“YYYY”位于页面中心 – SivaRajini

添加上面添加的CSS。你会得到输出。删除你的CSS并添加新的CSS – Neharika

试试这个小提琴链接： 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 
}

来源

2014-02-24 11:11:15 Neharika

谢谢。但请清楚地阅读我的问题，我需要在所有解决方案中提供支持。它不会将内容与其他决议中的内容对齐。 – SivaRajini

它将在所有分辨率下正常工作。我也检查了手机中的代码。它按预期工作。因为我们已经定义了所有的百分比。它会根据分辨率选择宽度 – Neharika

使用百分比宽度

回答

相关问题