Question

我在表格单元格中有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上设置一个高度（在我的例子中，div为“cell”类）。然而，这对我不起作用，因为内容是动态的。

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

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

Answer 1

无法测试这个，因为我在iPad上的演讲被卡住了

相对底部-1

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

同时将高度设置为父级应该可以强制e单元获得与td相同的高度（100％剂量吗？）

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

编辑：不会推特bootstrap这样做你有脚手架课吗？

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

具有灵活高度的表格单元内的绝对定位

1 个答案: