CSS“对齐”定位

时间:2008-10-23 09:54:16

标签: html css xhtml positioning

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

现在,

<h1>

有保证金:0; 所以它位于div的顶部。 div的高度为300px。

但是我希望将表放在div的底部,例如。 valign =“bottom”但是整个表格。

3 个答案:

答案 0 :(得分:3)

以下是雷米夏普的建议:

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

看起来很有效!

我在这里贴了所以它总是在这里。

答案 1 :(得分:2)

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

虽然它与达里尔的解决方案类似。除了我在包装div上没有使用position:absolute,而是使用position:相对于使表的位置绝对为止。

答案 2 :(得分:0)

这个怎么样:

<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都需要绝对定位。不确定这是否适用于您的布局。