CSS 布局问题（具有动态大小的单元格的表格布局）

Question

你好，

我需要构建一个看起来像这样的布局：

要求如下：

• 每行有 3 个单元格
• 左右单元格的宽度未知，可根据其内容进行调整
• 中间单元格应始终占用剩余空间，并应根据其内容自动调整其高度
• 左侧单元格的高度应始终与其包含 div（行）的高度相同，该高度再次由中间单元格的高度（100% 高度）给出

我已经通过这个设置完成了前 3 点：

• 左 div：向左浮动
• 右 div：向右浮动
• 中心 div：溢出：隐藏
• 重要提示：正确的 div 必须在标记中的中心 div 之前声明才能起作用

问题是我想不出任何方法来使左侧单元格始终与中心单元格的行高度相同。 100 % 高度不起作用，因为它是浮动状态...

示例代码和working testcase:

HTML：

<div class="outer">

    <div class="row">
        <div class="inner left">xxxxxxx</div>
        <div class="inner right">yyyyyyy</div>
        <div class="inner middle">Lorem ipsum dolor sit</div>
    </div>

    <div class="row">
        <div class="inner left">xxx</div>
        <div class="inner right">yyyyyyyyyyy</div>
        <div class="inner middle">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna</div>
    </div>

    <div class="row">
        <div class="inner left">xxxxxxxxxxxxxxxxxxx</div>
        <div class="inner right">yyy</div>
        <div class="inner middle">Lorem ipsum</div>
    </div>

</div>

CSS：

.outer {
    width: 500px;
}

.row {
    width: 100%;
    border: 1px solid black;
}

.inner {
    min-height: 24px;
}

.inner.left {
    background-color: yellow;
    float: left;
}

.inner.middle {
    background-color: red;
    overflow: hidden;
}

.inner.right {
    background-color: green;
    float: right;
}

非常感谢您对此的任何帮助！

提前致谢！

Answer 1

您可以使用display:table 来接近。 http://jsfiddle.net/HV2vh/8/

.outer {
    width: 500px;
    margin:1em auto;
}
.row {
    width: 100%;
    border: 1px solid black;
    display:table;
}
.inner {
    min-height: 24px;
    display:table-cell;
    width:1%;
}
.inner.left {
    background-color: yellow;
}
.inner.middle {
    background-color: red;
    width:7.5%;
}
.inner.right {
    background-color: green;
}