使用百分比宽度将两个div并排对齐到页面 [英] Aligning two divs side by side center to page using percentage width

问题描述

请参阅下面的代码

 < 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纯红色; 
 
  

小提琴：

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

我知道我们可以使用像素将div中心与页面对齐。但我想通过百分比宽度概念来实现。

如何通过百分比宽度概念对齐div，需要在IE8，IE9和chorme浏览器中工作如果我设置根宽度为80％或90％，那么对于特定的分辨率机器，div的居中，但其他分辨率无效。

我怎样才能设置宽度的百分比，以对齐所有类型的决议的中心div

谢谢，

解决方案

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

  #root 
 {
 width：60％; 
 margin：0 auto; 
 padding-left：20％; 
填充权：20％; 
} 
 
＃child1 
 {
 width：50％; 
 float：left; 
 text-align：center; 
 background-color：red 
 
} 
＃child2 
 {
 width：50％; 
 float：left; 
 text-align：center; 
 background-color：green 
} 
  

Please refer below code

<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;
}

fiddle :

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

i knew we can use"pixel" to align the div center to the page. but i want to do it through percentage width concept.

how can i align the div through percentage width concept that needs to be work in IE8,IE9 and chorme browser in all kind of resolutions.

if i set root width is 80% or 90% then for particular resolution machine the div's are centered but other resolutions its not working.

how can i set width in percentage to align the div in center for all kind of resolutions

Thanks,

解决方案

Try this fiddle link: 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
}

这篇关于使用百分比宽度将两个div并排对齐到页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！