1

画面を完全に 2 つの div に分割する方法を探しています。左側に小さな固定サイズが 1 つ、右側に動的な幅の 1 つ。

これを行う方法はまだわかりませんでした。パーセンテージの幅は比例していないためです。

例: http://jsfiddle.net/acmnU/2/

結果フィールドまたは全体の幅のサイズを変更すると、緑色の div が画面に比例してサイズ変更されないことがわかります。フィールドが小さくなると、緑の div が赤の div の下に入ります。

私が必要としているのはある種のアンカーです。緑の div が大きくなりすぎずに画面全体に表示されるようにします。

HTML:

<body>
    <div id="content">
        <div class="left">left</div>

        <div class="right">right</div>
    </div>
</body>

CSS:

body {
height: 300px;
}

#content {
    height: 100%;
}

.left {

    float: left;
    margin-left: 10px;
    background-color: red;
    height: 100%;
    width: 200px;
}
.right {
    float: left;
    margin-left: 10px;
    background-color: green;
    height: 100%;
    width: 80%;
}
4

2 に答える 2

1

あなたの質問を正しく解釈できたことを願っています。このフィドルを試すことができます

body {
    height: 300px;
}

#content {
    height: 100%;
}

.left {
    float: left;
    margin-left: 10px;
    background-color: red;
    height: 100%;
    width: 200px;
}
.right {
    margin-left: 200px;
    background-color: green;
    height: 100%;
}

の をの幅と等しくmargin-leftなるように設定しました。ただし、右側のパネルを使用しないでください。残りのスペースがいっぱいになります。.right.leftfloat

結果

于 2013-07-25T15:53:57.353 に答える