2 
<div id="leftdiv" style="background: yellow; min-width: 400px; max-width: 800px;">left content left content left content</div>

<div id="rightdiv" style="background: red; width: 250px;">right content right content right content</div>

float: left左の div max-width と min-widthに入れても機能しません。どうすればこれを修正できますか?

4

5 に答える 5

4

rightdiv をleft1 つの前に移動します。

<div id="rightdiv" >right content right content right content</div>
<div id="leftdiv">left content left content left content</div>

そして今、 1つだけ ：floatright

#leftdiv {
    background: yellow;
    min-width: 400px;
    max-width: 800px;
}

#rightdiv {
    background: red;
    width: 50px;
    float: right;
}

このFIDDLE DEMOをチェックして、必要かどうかを確認してください。

  • [!]モニターで結果を確認するためwidthに要素を減らしました。right古いものを使用できます。
于 2013-05-21T03:55:35.020 に答える
4

浮動小数点右 div は左 coz の前にある必要があります。ie の一部のバージョンで問題が発生します。

<div id="rightdiv" >right content right content right content</div>
<div id="leftdiv">left content left content left content</div>

ボットと同じCSS

#leftdiv
{
    background-color:Yellow;
    min-width:100%;
    max-width:800px;
    float:left;
}

#rightdiv
{
    background-color:red;
    width:250px;
    float:right;
}
于 2013-05-21T03:42:25.693 に答える
2

ビューポートのサイズが変更されたときに 2 つの div の 1 つを縮小したい場合は、Andi Muqisth が言ったようにして、パーセンテージを使用して div のサイズを変更するか、次のように一方を他方の親にするのが最も賢明です。 //jsbin.com/ileyaf/4/edit 

<div id="leftdiv">left content left content left content
    <div id="rightdiv">right content right content right content</div>
</div>

#leftdiv  {
    background: yellow; 
    width: 100%;
 }
#rightdiv {
    background: red; 
    max-width: 250px;
    float: right;
 }
于 2013-05-21T01:51:37.043 に答える
0

左のフロートが機能しているようです..このフィドルを参照してください

<div id="leftdiv">left content left content left content</div>
<div id="rightdiv" >right content right content right content</div>

CSS

#leftdiv
{
    background-color:Yellow;
    min-width:100%;
    max-width:800px;
    float:left;
}

#rightdiv
{
    background-color:red;
    width:250px;
    float:right;
}
于 2013-05-21T01:56:12.830 に答える