html上下四个格子,中间一个格子
时间: 2024-09-29 11:09:56 浏览: 36
在HTML中创建一个上、下各有一个边框,中间部分为空白的四格布局,你可以使用`<div>`元素并结合CSS来实现。下面是一个简单的示例:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<style>
.container {
display: flex;
justify-content: center; /* 中间对齐 */
align-items: center; /* 上下居中 */
height: 100vh; /* 全屏高度 */
}
.box {
width: 50%;
border: 1px solid black; /* 边框样式 */
margin: 0 10%; /* 给每个盒子留一些空间 */
box-sizing: border-box; /* 包含边框在内计算宽度 */
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
<!-- 这里可以添加其他两个相同的.box div,如果需要的话 -->
</div>
</body>
</html>
```
在这个例子中,`.container`设置了`flex`布局,使其成为弹性容器,`.box`类设置了宽度为50%,两个边框,并通过`margin`控制了间距。如果你想在中间放置内容,只需将`.box`标签内的内容替换为你想要显示的内容。
阅读全文