html - 2 つの div パネルを水平方向に配置する方法

Question

2 つの 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;
}

最初のパネル 2番目のパネル

どんな助けでもありがたく受け取った！

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