2

このような固定ヘッダーに2つのdivがあります

HTML

<div id="commit-header_panel">
   <div id="commit-header_panel_right" style="float:right;backg..."></div>
   <div id="commit-header_panel_left"></div>
   <div style="clear:both;"></div>
</div>

CSS

#commit-header_panel
{
    background-color: #c5e8fc;
    height:74px;
}
#commit-header_panel_left
{
    height:74px;
    min-width: 630px;
}

#commit-header_panel_right
{
    min-width: 573px;
    width:expression(document.body.clientWidth < 573? "573px": "auto" );
    height:74px;
}

問題は、ウィンドウのサイズを変更して幅を狭くすると、右の div が左の div と交差することです。

2 つ目 (右のフロート) が左のフロートの後ろに行かないようにしたい。右の div は左への移動を停止し、必要に応じてユーザーがブラウザー ウィンドウの水平スクロールバーを使用して右の部分を見ることができるようにする必要があります。

問題 ここに画像の説明を入力

4

4 に答える 4

2

水平スクロールバーが必要な場合は、ヘッダーの最小幅を設定します

#commit-header_panel
{
    min-width: 1203px
}
于 2013-03-28T13:54:43.377 に答える
2

メディア クエリを使用して CSS を定義できます。

例えば：

@media all and (max-width: <SET WIDTH HERE>) and (min-width: <SET WIDTH HERE>) {
    //Define CSS here for screen size 
}

または、使用するパーセンテージを定義する方法を変更することもできますwidth。<div>

このような：

#commit-header_panel_left
{
    height:74px;
    min-width: 30%; //replace with required value
}

#commit-header_panel_right
{
    min-width: 30%; //replace with required value
    width:expression(document.body.clientWidth < 573? "573px": "auto" );
    height:74px;
}
于 2013-03-28T13:54:45.503 に答える
1

divを修正しwidthます。commit-header_panel

于 2013-03-28T14:07:33.433 に答える
0

これを行う最も簡単な方法は、パネルが重なり始める幅を見つけて、min-width: Xpx; を設定することです。親コンテナに。これにより、パネルはウィンドウのサイズ変更に動的に応答できますが、パネルが移動しなくなる停止ポイントが作成されます。

パネルの幅を width: auto; に設定することもできます。または幅: X%; 一部のブラウザは最小幅にスナップするだけで、ウィンドウ サイズの変更に応答しない場合があります。 

#commit-header_panel {
background-color: #c5e8fc;
height:74px;
width: 100%;
min-width: 900px;
}

次に、フロートを次のようにクリアしてください。

<div style="clear: both;"></div>
于 2013-08-20T17:29:12.107 に答える