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

【问题标题】：2 Floating divs, Need the first one to auto-size according to parent div and 2nd floating div2个浮动div，需要第一个根据父div和第二个浮动div自动调整大小
【发布时间】：2015-07-24 05:54:36
【问题描述】：

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

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

所以基本上我希望left根据“right”的宽度自动调整大小，但必须保持在“parent”容器的范围内！

我查了很多地方，但没有找到合理的答案！希望这个网站可以帮到我！ :D

提前致谢

【问题讨论】：

请使用纯 CSS，因为此代码也需要在电子邮件上工作！ :D 再次感谢大家
为什么 div#right 向左浮动？
如果您需要它来处理电子邮件，请使用表格。电子邮件客户端不适用于 CSS。

标签： css layout html css-float

【解决方案1】：

向右浮动#right，不要浮动#left，而是给它一个margin-right，它等于#right的宽度。如果您浮动#left，它将占用其内容的大小，但如果您不浮动它，它将占用可能的最大宽度。你只需通过设置边距来降低这个最大宽度。

Demo

请注意，我在标记中更改了 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 中测试。

【讨论】：

【解决方案2】：

您需要使用 JavaScript 来检测剩余空间。仅靠 CSS 无法做到这一点。使用 jQuery 你可以做到

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

检查工作示例http://jsfiddle.net/NP4vb/

【讨论】：

你的代码效果很好，但我希望它是纯 CSS 的，我很确定这是可能的！再次感谢您的帮助！

【解决方案3】：

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

【讨论】：