1

我在表格单元格中有 2 个 div，希望一个与单元格顶部对齐，另一个与单元格底部对齐。

我创建了这个 jsFiddle http://jsfiddle.net/davew9999/3Mwz5/11/，它显示了我拥有的 HTML 结构。这是代码：

HTML

<table>
<tbody>
    <tr>
        <td>
            <div class="cell">
                <div class="top">This text is dynamic so can't set fixed height on this div. For example
                    this text could be very long while the others are quite short.</div>
                <div class="bottom">This should always be at the bottom of the table cell and also is dynamic
                    and can't be a fixed height.</div>
            </div>
        </td>
        <td>
            <div class="cell">
                <div class="top">Not much text.</div>
                <div class="bottom">This should always be at the bottom of the table cell and also is dynamic
                    and can't be a fixed height</div>
            </div>
        </td>
    </tr>
</tbody>
</table>

CSS

tr {
    vertical-align: baseline;
}
td {
    padding:10px
}
.cell {
    position: relative;
}
.bottom {
    position: absolute;
    bottom: 0;
}

我发现的所有解决方案都涉及在包装器 div 上设置高度（在我的示例中为“cell”类的 div）。但是，这对我不起作用，因为内容是动态的。

我尝试了一个解决方案，我计算了加载时 td 元素的高度，并将具有“cell”类的 div 设置为相同的高度。这一直有效，直到我调整浏览器窗口的大小，从而导致表格单元格的高度发生变化。我尝试处理浏览器窗口调整大小事件，但是在单击和拖动调整大小期间会触发很多。它必须在 IE8 及其缓慢的 JavaScript 引擎中工作，并且有超过 200 个 td 元素来检查这不是一个合理的解决方案。

一个为我提供所需输出的解决方案是将具有“top”类的 div 的内容和具有“bottom”类的 div 拆分为 2 个表格行，但是我想知道是否有纯 CSS 解决方案或更好的 CSS 和 JavaScript我尝试过的解决方案。

4

1 回答 1

1

无法测试这一点，因为我被困在 iPad 上的讲座中，但是

相对底部 -1

应该将元素固定到绝对底部，反之亦然

以及将高度设置为父级应该可以强制 e 单元格获得与 td 相同的高度（100% 剂量这个？）

再次无法测试 ATM，直到 jfiddle 修复 ipad chrome/safari 问题

编辑： twitter bootstrap 不会为你提供脚手架类吗？

编辑 2：脚手架和响应式 http://twitter.github.com/bootstrap/scaffolding.html#responsive

于 2013-02-11T12:54:59.493 回答