CSS扩展div宽度以匹配其他float

Question

Goodday，

我有2个div，我有1个漂浮在右边，1个漂浮在左边。

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

右边的div float的宽度是动态的，因此过程宽度不起作用。

这是一张解释

的图片

Answer 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;
}

Answer 2

尝试此代码demo

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

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

Answer 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;
}

Answer 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

希望这有帮助。

Answer 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;
}