2

説明する前に、次のことを考慮してください...

HTML コードの例:

<div id="Body">
    <div id="Content">...</div>
    <div id="Panel">...</div
</div>

CSS コード:

#Body {
    min-width: 865px;
    width: 93%;
    max-width: 1785px;
}

#Panel {
    width: 250px;
    float: right;
}

#Content {
    float: left;
    min-width: 595px;
    width: /* This one needs to be fluid. So, what should I do? */;
    max-width: 1510px;
}

ご覧のとおり、'Body' div は私が参照していた流動幅の親であり、固定幅の子要素 ​​'Panel' div と流動幅の 'Content' div があります。

「Content」div の幅はどのように定義すればよいですか? どんなアイデアでも大歓迎です。ありがとう。

4

2 に答える 2

1

最初に#Paneldivを配置し、次にこれを次の目的で使用します#Content。

#Content {
    margin-right: 250px;
}

jsFiddleデモ

これをサイトで機能させるための簡単なガイドラインを次に示します。Chromeデベロッパーツールを使用してこれらを実行しましたが、正常に機能します。

  • #Body@ style.css
    • overflow: hidden;
  • #Content@ custom.css
    • min-width: 595px;
    • width: 68%;
    • max-width: 1510px;
    • margin-right: 270px;
  • #Content@ style.css
    • width: 680px;
    • float: left;
于 2012-03-14T07:39:22.320 に答える
0

この問題の修正は次のとおりです。

#Body {
    min-width: 865px;
    width: 93%;
    max-width: 1785px;
    position:relative; /* Added by me */
}

#Panel {
    width: 250px;
    /*float: right;*/
    position:absolute; /* Added */
    top:0; /* Added */
    right:0; /* Added */
}

#Content {
    float: left;
    min-width: 595px;
    width: 100%; /* Value added */
    max-width: 1510px;
    margin-right:250px; /* Added */
}

それは私にとってはうまくいきました。

于 2012-03-14T07:52:16.857 に答える