CSS 扩展 div 宽度以匹配其他浮点数答案

【问题标题】：CSS Expand div width to match other floatCSS 扩展 div 宽度以匹配其他浮点数
【发布时间】：2014-08-04 19:30:35
【问题描述】：

晚安，

我有 2 个 div，其中 1 个向右浮动，1 个向左浮动。

浮动右侧的宽度为：200px；父级是宽度：1000px；我怎么能说左边的浮动是 1000 - 200 = 800 所以 div 总是填充宽度？

div 向右浮动的宽度是动态的，所以前向宽度不起作用。

这里有一张解释的图片

【问题讨论】：

请展示你做了什么，。
s29.postimg.org/6nmggqip3/Naamloos.png 图片说明

标签： html css

【解决方案1】：

类似这样的FIDDLE

<div class="container">
    <div class="right"></div>
    <div class="left"></div>
</div>

CSS

.container {
    width:600px;
    height:200px;
    border:1px solid;
}
.left {
    width:auto;
    height:200px;
    background:red;
    overflow:hidden;
}
.right {
    height:200px;
    width:200px;
    background:blue;
    float:right;
}

【讨论】：

很高兴为您提供帮助:)

【解决方案2】：

试试这个代码demo

<aside class="panel">
    ...
</aside>
<div class="content">
    ...
</div>

.content {
    overflow: hidden;
  border: 1px  solid;
}
.panel {
    float: right;
    width: 200px;
  border: 1px  solid;
}

【讨论】：

【解决方案3】：

Demo

使用calc

css

.container {
    width:1000px;
    height:200px;
}
.left {
    width:calc(100% - 200px); /* this will take the remaining space */
    height:200px;
    background:red;
}
.right {
    height:200px;
    width:200px;
    background:blue;
    float:right;
}

【讨论】：

正如 OP 明确提到的The width of div float right is dynamic so procentual width does not work.

【解决方案4】：

你可以使用百分比，在你设置父 div 的宽度为 1000px 之后；

<div class="parentDiv clearfix">
   <div class="floatRight"></div>
   <div class="floatLeft"></div>
</div>

CSS

.parentDiv{
   width:1000px;
   height:300px;
   border:1px solid black;}
.floatRight{
   height:300px;
   width:20%;
   background-color:red;
   float:right;
}
.floatLeft{
   height:300px;
   width:80%;
   background-color:yellow;
   float:left;
}

JsFiddle

希望这会有所帮助。

【讨论】：

【解决方案5】：

应该是这样的。 JSFiddle is here

HTML

<div class="parent">
    <div class="right"></div>
    <div class="left"></div>
</div>

CSS

.parent {
    width: 1000px;
}
.left {
    overflow: hidden;
}
.right {
    float: right;
    width: 200px;
}

【讨论】：