9

コンテンツ div 内に 3 つの div があります。

コンテナ幅70%。その中に -Left、幅 20% があります。-内容、幅60%。-右、幅 20%。

コンテナーがページの幅の 70% を占め、内側 (左、コンテンツ、および右) がコンテナー div の 20%、60%、および 20% を占めるようにします。

ここで他の質問を試しました。Google を試しましたが、正しい答えが見つからないようです。それらが重ならないように助けてください。

最大化されたブラウザ

しかし、ブラウザのサイズを変更すると、div が重なります。このような：

ブラウザのサイズ変更

関連する CSS コードは次のとおりです。

#container{
    width: 70%;
}
#left {
    float: left;
    width: 20%;
    min-width: 200px;
}
#content {
    float: left;
    width: 60%;
    min-width: 600px;
}
#right {
    float: right;
    width: 20%;
    min-width: 200px;
}
4

6 に答える 6

8

min-widthCSSからを削除するだけです！そして、それを中心にするためmin-widthにコンテナに与えmargin: autoます。

このCSSを試してください：

#container{
    width: 70%;
    min-width: 1000px;
    margin: auto;
}
#left {
    float: left;
    width: 20%;
}
#content {
    float: left;
    width: 60%;
}
#right {
    float: right;
    width: 20%;
}

ここでフィドルをチェックしてください：http：//jsfiddle.net/UaqU7/2/

于 2012-06-12T06:34:13.070 に答える
4

min-width CSS を取り出します。

ウィンドウの幅が特定のサイズを下回ると、それらの要素はオーバーラップするしかなくなります。ウィンドウが 1000px だとしましょう。コンテナは700pxになります。しかし、最小幅では、コンテナー内の div は既に 1000px であり、コンテナーからはみ出しています。

于 2012-06-12T06:29:56.597 に答える
3

子DIVの最小幅を指定する代わりに、に指定できます#container。このように書いてください：

#container{
    width: 70%;
    min-width:1000px;
}
#left {
    float: left;
    width: 20%;
}
#content {
    float: left;
    width: 60%;
}
#right {
    float: right;
    width: 20%;
}

これをチェックしてくださいhttp://jsfiddle.net/yLVsb/

于 2012-06-12T06:35:00.903 に答える
1

最小幅が必要な場合は、コンテナに設定します

http://jsfiddle.net/VBSYu/1/

#container{
    width: 70%;
    min-width: 1000px;
}
#left {
     float: left;
     width: 20%;
}
#content {
    float: left;
    width: 60%;
}
#right {
    float: right;
    width: 20%;
}​
于 2012-06-12T06:34:22.600 に答える