html - CSS 流体列(取决于内容宽度)

Question

谁能帮我找到这个问题的 CSS 解决方案(是的，没有 JS):

+---------+----------------------+-------------------------------+
| Fixed   |   Variable           |  Flexible width               |
|   width |      width content   | (adjusting to content width)  |
+---------+----------------------+-------------------------------+

<div>
  <div>Fixed width</div>
  <div>Variable width content</div>
  <div>Flexible width (adjusting to content width)</div>
</div>

注意:需要 IE7 支持。所有列都是透明的，不能相互重叠。

• 第一列固定宽度；
• 第二列的宽度可变(取决于图像尺寸)；
• 第三列必须占用所有剩余空间。

Answer 1

这个怎么样。

parent -> position:relative;
parent:after -> clear:both
 fixed -> position:absolute
 variable -> float:left;padding-left:a-fixed-num
 flex -> display:block