css - 左右两个具有自动宽度的 div

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

将您的rightdiv 移到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 的大小，或者将其中一个设为另一个的父级，如下所示：Demo: 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

向左浮动似乎工作..看到这个小提琴

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