html怎样保持高度一致,设置多个模块(div)高度始终保持一致
时间: 2024-01-28 17:03:26 浏览: 107
使用css+html制作的抖音首页
要保持多个 div 高度一致,可以使用 CSS 中的 display:flex 属性。具体操作步骤如下:
1. 父元素设置 display:flex 属性。
2. 子元素设置 flex:1 属性,表示子元素均分父元素的宽度。
3. 子元素的高度设置为 100%。
示例代码如下:
```html
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
```
```css
.container {
display: flex;
}
.box {
flex: 1;
height: 100%;
}
```
这样设置后,无论子元素的内容多少,它们的高度都会保持一致。
阅读全文