将2个div并排放置在嵌入iframe的方形容器中

Question

当我想在嵌入方形iframe的容器中并排放置2个div时，我遇到了CSS问题。

问题

• iframe有一个固定的高度和宽度，是一个正方形。但是，它的尺寸是用javascript生成的，所以我事先并不知道。
• 容器有width:100%; height: 100%;。
• 第一个div具有可变宽度：它包含一个动态选择的图像height: 100%;，此图像的比例高度/宽度是可变的（但永远不会<1）。
• 我希望第二个div占用容器的剩余宽度。

我正在处理容器及其子元素的CSS。

我的问题是我不能让第二个div占用剩下的所有空间。

情况

.==iframe==================.
|.======container=========.|
||                 |      ||
||                 |      ||
||      1st div    | 2nd  ||
||                 | div  ||
||                 |      ||
||                 |      ||
||                 |      ||
||                 |      ||
||                 |      ||
|.========================.|
.==========================.
(please, imagine that iframe and container are squared :))

我的结果

在StackOverflow上阅读了很多答案之后，我明白我必须将display: inline-block;添加到我的div中，以便它们能够并排运行并且运行良好。我也成功地管理了div的高度，但我不能让第二个div占用剩下的所有空间。

我为我所做的事创建了一个简化的jsfiddle：

• 我为正文指定了一个模仿iframe行为的大小。
• 图像和体型只是一些例子。

http://jsfiddle.net/e5whkna9/

正如你在小提琴上看到的那样：

• 黑色图像（和第一个div）占据了应有的空间。
• 黄色div（第二个）具有良好的高度但不占用剩余的所有宽度。
• 粉红色的div（容器）并没有被我的第一和第二个div完全覆盖。

从我发现的情况来看，如果没有定义宽度的元素，就不可能占用“所有剩余空间”。我希望我错过了一些东西，因为我在javascript运行之前不知道iframe的宽度，我想避免用javascript设置我的div的尺寸。

我在找什么

我正在寻找一个解决方案或指向网站的指针，这将有助于我理解并解决这个问题：让第二个div适应剩余的空间。

感谢您的帮助。

Answer 1

从侧面div中取出显示内联块。

  .side {
    height: 100%;
  }
  .first {
    float: left;
    background-color: red;
  }
  .second {
    background-color: yellow;
  }

DEMO