如何水平對齊兩個div面板

我已經創建了兩個div並使用css內聯屬性左右對齊，問題是我無法設置寬度和高度百分比（不是像素值），我已經看到了這個問題的一些辦法，但我沒有得到解決呢，如何水平對齊兩個div面板

這就是我想要的： enter image description here

這裏是一個小提琴：http://jsfiddle.net/6JgNu/（我用的像素值來設置高度而不是百分比）。請用百分比值的高度更新它。

下面是代碼：

<style type="text/css"> 
.left-panel 
{   
    background-color:#ccc; 
    width:10%; 
    height:100px;    
} 
.right-panel 
{   
    background-color:Gray; 
    width:90%; 
    height:100px; 
}

第一板第二面板

任何幫助感激地接受！

來源

2012-11-03 super

使用float:left

.left-panel 
{   
    background-color:#ccc; 
    width:10%; 
    height:100px; 
    float:left;    
} 
.right-panel 
{   
    background-color:Gray; 
    width:80%; 
    height:100px; 
    float:left; 
}

演示：http://jsfiddle.net/6JgNu/5/

來源

2012-11-03 05:26:04

是否可以設置百分比值的高度 – super

在你的情況下，你必須使用'px'作爲高度。百分比值不起作用。 –

感謝您的幫助 – super

只需將float:left;添加到.left-panel即可。希望這有幫助，祝你好運。

來源

2012-11-03 05:24:06

添加浮動：左到div的，它應該工作

來源

2012-11-03 05:26:49 Mihai

使用這個CSS

.left-panel 
    {   
     background-color:#ccc; 
     width:10%; 
     height:100px; 
     float:left;   
    } 
    .right-panel 
    {   
     background-color:Gray; 
     width:90%; 
     height:100px; 
     float:left; 
}

來源

2012-11-03 05:30:20

使用此：

<style> 
.left-panel 
{   
    background-color:#ccc; 
    width:10%; 
    height:100px; 
    float:left;   
} 
.right-panel 
{   
    background-color:Gray; 
    width:90%; 
    height:100px; 
    float:left; 
} 

</style> 

<div class="left-panel"></div> 
<div class="right-panel"></div>

來源

2012-11-03 10:13:37 akdesigner

如何水平對齊兩個div面板

回答

相關問題