如何水平对齐两个div面板

Question

我已经创建了两个div并使用css内联属性左右对齐，问题是我无法设置宽度和高度的百分比（不是像素值），我已经看到了一些替代方案问题，但我还没有得到解决方案，

这就是我想要的：

这是一个小提琴：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;
}

    第一小组     第二小组

感激不尽的任何帮助！

Answer 1

使用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/

Answer 2

只需将float:left;添加到.left-panel即可。希望这会有所帮助 - 祝你好运。

Answer 3

使用此：

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

Answer 4

添加     向左飘浮 到divs它应该工作

Answer 5

使用此css

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