CSS“对齐”定位答案

【问题标题】：CSS "valign" PositioningCSS“对齐”定位
【发布时间】：2010-09-18 18:04:48
【问题描述】：

<div>
<h1>Title</h1>
<table>
...
</table>
</div>

现在，

<h1>

有边距：0；所以它位于div的顶部。 div的高度是300px。

但是，我希望将表格放置在 div 的底部，例如。 valign="bottom" 但适用于整个表格。

【问题讨论】：

标签： html css xhtml positioning

【解决方案1】：

这是雷米夏普的建议：

<style type="text/css" media="screen">
#container { 
    position: relative; 
    margin: 0;
    height:300px;
    border:1px solid #000; 
}
#container h1 { 
    margin:0; 
}
#tableLayout { 
    position: absolute;
    bottom:0; 
    border: 1px solid #c00;
}
</style>

<div id="container">
    <h1>Title</h1>
    <table id="tableLayout">
      <tr><td>example cell</td></tr>
    </table>
</div>

看起来很有效！

我把它贴在这里，所以它会一直在这里。

【讨论】：

【解决方案2】：

试试这个：http://jsbin.com/emoce

虽然它类似于 Darryl 的解决方案。除了我没有在包装 div 上使用 position:absolute，而是使用 position:relative 来使表格的位置相对于该位置绝对。

【讨论】：

【解决方案3】：

这个呢：

<style type="text/css">
#container { 
    position: absolute; 
    margin: 0;
    height:300px;
    border:1px solid #000; }
#container h1 { 
    margin:0; }
#tableContainer { 
    position: absolute;
    bottom:0; }
</style>

<div id="container">
    <h1>Title</h1>
    <div id="tableContainer">
        <table id="tableLayout">
            <tr><td>...</td></tr>
        </table>
    </div>
</div>

唯一的问题是容器 div 和 tableContainer div 都需要绝对定位。不确定这是否适用于您的布局。

【讨论】：