html - 如何水平对齐两个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

将 float:left 添加到 div 中，它应该可以工作

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