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 提前致谢

已邀请:

3 个回复

佃蒜狗掂哥

向右浮动#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>

要回复问题请先登录或注册

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

3 个回复

发起人

css

layout

html

css_float

问题状态

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

与内容相关的链接

3 个回复

发起人

css

layout

html

css_float

问题状态