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支持。所有列都是透明的，不能相互重叠。

第一列是固定宽度;
第二列是可变宽度（取决于图像尺寸）;
第3栏必须占用所有剩余空间。

Answer 1

这个怎么样。

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

Answer 2

@Rufus有正确的想法，但它错过了一件事。高度。我会通过一些小修改来推荐几乎相同的东西：

.parent {
    position:relative;
}
.parent:after {
    clear: both;
}
.fixed {
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px; /* Conflicting absolute position trick */
    width: 150px; /* Or whatever the width you need is */
}
.variable {
    margin-left: 150px; /* Or, again, whatever you need */
    float: left;
    min-height: 100%; /* Don't use a border or padding or this will be messed up */
}
.flex {
    min-height: 100%; /* Same as variable, border or padding could mess this up */
}

所有列应该是相同的高度，您应该准备好了

Answer 3

试试这个：

.group {
    display: table;width: 100%; table-layout: fixed;
}

.group > div {
    display: table-cell
}

jsFiddle example

这样，右边的div不是100％宽度，但是中间div不会随着它的内容而扩展......

CSS流体柱（取决于内容宽度）

3 个答案: