html中3个div标签放在同一个框里
时间: 2024-09-14 17:11:38 浏览: 12
在HTML中,如果你想将三个`<div>`标签放置在同一容器内,你可以使用`<div>`元素作为它们的共同父级。例如:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>三个div在同一框</title>
<style>
.container { /* 容器样式 */
display: flex; /* 使用Flexbox布局 */
flex-wrap: wrap; /* 如果内容超过一行,换行显示 */
}
</style>
</head>
<body>
<div class="container">
<div style="flex: 1;"> <!-- 第一个div,分配剩余空间的1份 -->
内容1
</div>
<div style="flex: 1;"> <!-- 第二个div,同样分配剩余空间的1份 -->
内容2
</div>
<div style="flex: 1;"> <!-- 第三个div,分配剩余空间的1份 -->
内容3
</div>
</div>
</body>
</html>
```
在这个例子中,`.container`设置了`display: flex`使其成为一个弹性盒子模型,每个`<div>`通过`flex: 1`设置占据相等的空间,如果内容不够大,会自动换行。