Question

我需要我的桌子在我的div的底部对齐，我已经尝试在表格中添加属性：position:absolute;bottom:0px，但它根据页面而不是div而改变。我发布了完整的代码（带有img标签）cus我不确定其他标签的影响。

// HTML

 <div>
            <img src="Img/flower" style="width: 960px; height: 474px; z-index: -1; position: absolute" />
            <table style="width:100%;height:120px;">
                  <tr>
            <td style="background-color:gray">
            </td>
             <td style="background-color:green">
            </td>
             <td style="background-color:yellow">
            </td>
             <td style="background-color:red">
            </td>
             <td style="background-color:lime">
            </td>
             <td style="background-color:maroon">
            </td>
        </tr>
            </table></div>

Answer 1

你的父母＆＃34; div＆＃34;和＆＃34; img＆＃34;应该声明为＆＃34; position：relative＆＃34;在这案件。这是你的解决方案：

<div style="position: relative;">
            <img src="Img/flower" style="width: 960px; height: 474px; z-index: -1; position: relative;">
            <table style="width: 100%; height: 120px;">
                  <tbody><tr>
            <td style="background-color:gray">
            </td>
             <td style="background-color:green">
            </td>
             <td style="background-color:yellow">
            </td>
             <td style="background-color:red">
            </td>
             <td style="background-color:lime">
            </td>
             <td style="background-color:maroon">
            </td>
        </tr>
            </tbody></table>


</div>

Answer 2

您还可以使用CSS Flexbox（检查浏览器支持）进行垂直对齐：

https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

<div class="Aligner">
  <div class="Aligner-item Aligner-item--bottom">…</div>
</div>
<style>    
.Aligner {
  display: flex;
  align-items: center;
  justify-content: center;
}
.Aligner-item--bottom {
  align-self: flex-end;
}
<style>

如何在div的底部设置一个表

2 个答案: