如何水平对齐两个div面板

Question

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

这就是我想要的： 这里是一个fiddle：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;
}

非常感谢您的帮助！

- super

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

Demo: http://jsfiddle.net/6JgNu/5/

- Muthu Kumaran

---

能否以百分比值设置高度？ - super

在您的情况下，您必须使用 px 作为高度单位。百分比值将不起作用。 - Muthu Kumaran

Answer 2

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

- Brad Werth

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>

- akdesigner

Answer 4

使用这个 CSS。

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

- Harshit Tailor

Answer 5

将 float:left 添加到 div 元素中，它就会正常工作。

- Mihai