1

この例を見てください: http://jsfiddle.net/yU6qG/5/

<div class="left">LeftMargin</div>
<div class="right">RightMargin</div>

.left {
    float:left;
    width: 100px;
    height: 100%;
    background-color : red;
}
.right {
    float:left;
    width: auto;
    height: 300px;
    background-color : blue;

}

ウィンドウのサイズを変更しようとすると、右側の div が 1 行下にジャンプすることがわかります。どうすればこれを防ぐことができますか? また、nto left が高さの 100% を占めるのはなぜですか?

ありがとう

Edit1 : 申し訳ありませんが、明確ではありませんでした。これはレスポンシブ デザイン用です。右の div は拡大縮小します。

4

6 に答える 6

1

これをチェックしてください右のdivは常に利用可能なスペースをカバーし、画面のサイズ変更時に次の行に移動しません 

.left {
    float:left;
    width: 100px;
    height: 300px;
    background-color : red;
}
.right {
    display: block;
    height: 300px;
    background-color : blue;
    box-sizing: border-box;
    -moz-box-sizing: border-box; 
    width: 100%;
    min-width: 200px;
}
于 2013-04-19T14:00:38.933 に答える
0

これが float の機能です: スペースがなくなるまで左に押し、その後、次の行に配置します。

代わりにこれを使用できます：

<div class="parent">
    <div class="left">LeftMargin</div>
    <div class="right">RightMargin</div>
</div>

.left {
    display: inline-block;
    width: 100px;
    height: 100%;
    background-color : red;
}
.right {
    display: inline-block;
    width: 200px;
    height: 300px;
    background-color : blue;
}
.parent{
    width: 310px;
    border: 1px solid black;

}
于 2013-04-19T13:50:47.723 に答える