html5如何让元素在div中靠下方,不使用绝对定位
时间: 2024-03-22 22:38:04 浏览: 15
如果不使用绝对定位,也可以使用 flex 布局或者 grid 布局来实现。具体步骤如下:
使用 flex 布局:
1. 将 div 的 display 属性设置为 flex,这样子元素就可以通过 align-items 和 justify-content 属性来控制垂直和水平方向的对齐方式。
2. 设置 align-items 属性为 flex-end,这样子元素就会在 div 的底部对齐。
3. 如果需要调整子元素与 div 底部之间的距离,可以通过设置子元素的 margin-top 属性来实现。
具体代码如下:
```
<div style="display: flex; align-items: flex-end; height: 200px;">
<div style="margin-top: 20px;">这是一个在 div 底部的元素</div>
</div>
```
使用 grid 布局:
1. 将 div 的 display 属性设置为 grid,这样子元素就可以通过 grid-template-rows 属性来控制行高。
2. 在 grid-template-rows 属性中设置一个自动的行和一个固定高度的行,这样子元素就会被放置在第二行。
3. 如果需要调整子元素与 div 底部之间的距离,可以通过设置第一行的高度来实现。
具体代码如下:
```
<div style="display: grid; grid-template-rows: auto 50px; height: 200px;">
<div></div>
<div style="margin-top: 20px;">这是一个在 div 底部的元素</div>
</div>
```