Question

<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不起作用。我该如何解决这个问题？

Answer 1

浮动右div必须在离开之前因为它在某些版本的ie

中出现问题

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

CSS与bot相同

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

#rightdiv
{
    background-color:red;
    width:250px;
    float:right;
}

Answer 2

将right div移到left之前：

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

现在只是 float right一个：

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

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

选中此FIDDLE DEMO以查看您是否想要。

[!]我减少了width元素的right，以便在我的监视器中查看结果。你可以用旧的。

Answer 3

如果想要在调整视口大小时缩小2个div之一，最明智的做法是像Andi Muqisth所说的那样，并使用百分比来调整你的div，或者让其中一个成为另一个的父节点，如下所示：演示：http://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;
 }

Answer 4

Float left似乎正在运作..请参阅此fiddle

<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;
}

Answer 5

如果您先指定左侧div，则只需输入

<div style="float:left">
</div> 
<div style="clear:both">
</div> 
<div style="float:right">
</div>

否则，如果您首先指定右侧div，则无需清除

<div style="float:right">
</div>
<div style="float:left">
</div>

两个div左右有自动宽度

5 个答案: