0

嘿那里，

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

要求如下：

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

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

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

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

示例代码和工作测试用例：

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

我真的很感激这方面的任何帮助！

提前致谢！

4

1 回答 1

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;
}
于 2013-06-29T23:43:39.213 回答