2个浮动div，需要第一个浮动div根据父级div和第二个浮动div自动调整大小

问题描述

这就是我的代码的运行方式：-

<div id=\"parent\" style=\"width:49%\">
  <div id=\"left\" style=\"float:left;clear:both;width:auto\">BLAH!BLAH!Content goes here</div>
  <div id=\"right\" style=\"float:left;clear:both:width:250px\">Content again goes here!</div>
</div>

因此，基本上我想让左根据\“ right \”的宽度自动调整大小，但必须保持在\“ parent \”容器的限制内！ 我在很多地方抬头，但没有找到明智的答案！希望这个网站能帮到我！ ：D 提前致谢     

解决方法

向右浮动

#right

，不要让

#left

浮动，而是给它一个

margin-right

，其宽度等于

#right

。如果浮动

#left

，它将占用其内容的大小，但是如果不浮动，它将占用可能的最大宽度。您只需通过设置边距来降低此最大宽度。 演示版 注意，在标记中，我更改了div的顺序：

  <div id=\"right\">Content again goes here!</div>
  <div id=\"left\">BLAH!BLAH!Content goes here</div>

CSS的重要部分：

#parent { 
    width: /*whatever you need*/; 
    overflow: hidden; /* to let it take up the height of floated elements */
}

#left {
    margin-right: 250px;
}

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

已在FF4，Chrome，IE8中测试。     ,您需要使用JavaScript来检测剩余空间。仅靠CSS不能做到这一点。使用jQuery，您可以做

var parentw = $(\'#parent\').width();
var rightw = $(\'#right\').width();
$(\'#left\').width(parentw - rightw);

检查工作示例http://jsfiddle.net/NP4vb/     ,纯CSS答案：

<div id=\"parent\" style=\"width:49%\">
  <div id=\"left\" style=\"float:left;clear:both;width:calc(100% - 250px)\">BLAH!BLAH!Content goes here</div>
  <div id=\"right\" style=\"float:left;clear:both:width:250px\">Content again goes here!</div>
</div>