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; 属性用于父元素;

LIVE DEMO

#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行为：

LIVE DEMO

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

或者只需将背景分配给父：

<强> LIVE DEMO

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

}

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

CSS

HTML

2 个答案: