html - 使用具有设置大小 div 的 Flex 框

Question

我有一个 100% 宽度的容器和一个左浮动<div>100px X 100px 的图像，右浮动<div>在相同的高度，但我希望它填充剩余空间而不必使用表结构。我相信我可以用 CSS 元素 Flex 做到这一点，但有人知道怎么做吗？

CSS

#container {
    width:100%;
    height:100px;
}
#image {
    width:100px;
    height:100px;
    float:left;
}
#rightcontent {
    float:right;
}

HTML

<div id="container">
    <div id="image">
    </div>
    <div id="rightcontent">
    </div>
</div>

Answer 1

您只需要在不浮动的情况下向右侧元素添加溢出：

#rightcontent {
  overflow: hidden;
}

这将#rightcontent填补剩余的空间。值也可以是scroll，但这并不重要，因为没有什么可以溢出的。

这是最干净的解决方案。

http://jsfiddle.net/SW8uE/

Answer 2

对父元素使用CSS属性；display:flex;

现场演示

#container {
    width:100%;
    height:100px;
    display: flex; /* NOTE THIS */
    overflow:auto;
}
#image {
    width:100px;
    height:100px;
    background:#faf;
}
#rightcontent {
    background:#cf5;
    width:100%;      /* AND THIS */
}

---

您不需要使用<table>来模拟table行为：

现场演示

#container{
  height:100px;
  width:100%;
  display:table;  /* NOTE THIS */
}
#container > div{
  display:table-cell; /* AND THIS */
}
#image{
  width:100px;
  background:#faf;
}
#rightcontent{
  background:#cf5;
}

---

或者通过简单地将背景分配给父级：

现场演示

#container {
    width:100%;
    height:100px;
    background:#cf5;  /* NOTE THIS */
}
#image {
    width:100px;
    height:100px;
    float:left;
    background:#faf;
}
#rightcontent {

}