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;
}