使用百分比寬度

請參考下面的代碼對齊兩個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

使用百分比寬度

回答

相關問題