css - 使元素填充父容器提供的可用空间

Question

我有一篇流畅的文章，它有 2 列，第 1 列包含一个图像，该图像填充该列可用的任何空间，另一列有文本，但我不确定如何制作此列 .content-col 占用.article 提供的空间。谁能建议如何实现这一目标？

Jsfiddle http://jsfiddle.net/R7AuG/

CSS 片段

.img-col{
    width: 25%;
    float: left;
}

.content-col{
    background: black;
    width: 75%;
    float: left;
}

.col{
    width: 50%;
    float: left;
}

我也知道这可以通过 display:table 来实现，但我想知道是否可以不用它来完成？

Answer 1

如果你不想模仿一个表格，你可以使用一个小的 CSS 技巧，即添加

overflow: hidden

到文章，加上应用

margin-bottom:-1000em;
padding-bottom:1000em;

到.content-col

See example