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

问题描述

这是我的代码可能会如何： -

This is how my code may go:-

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

所以基本上我想让左边的自动调整大小基于右的宽度，在父容器的限制！

So basically I want left to auto-size based on the the width of "right" but must stay in limits of the "parent" container!

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

I looked up many places but didn't find sensible answers! Hope this website can help me! :D

提前感谢

推荐答案

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

Float #right to the right, and do not float #left but give it a margin-right which is equal to the width of #right. If you float #left, it will take up the size of its contents, but if you don't float it, it will take up the possible maximum width it can. And you just lower this maximum width by setting a margin.

请注意，在标记中我更改了divs的顺序：

Notice that in the markup I changed the order of divs:

  <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测试。

Tested in FF4, Chrome, IE8.

这篇关于2浮动div，需要第一个根据父div和第二浮动div自动调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！