HTML编写一个页面, 左侧一个侧边框div ;右侧 从上到下依次排列五个盒子。右侧五个盒子的宽度刚好填充满布局, 总体高度与左侧状态栏同高
时间: 2023-07-15 21:15:24 浏览: 46
以下是一个示例代码,包含一个左侧的侧边栏和右侧的五个盒子。其中,右侧的五个盒子使用了flex布局,且设置了flex-grow属性,让它们能够平分宽度。整个页面使用了CSS的grid布局,将左侧和右侧的内容分别放在两个不同的区域中。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面布局</title>
<style>
/* 使用grid布局 */
.container {
display: grid;
grid-template-columns: 200px 1fr; /* 左侧宽度为200px,右侧占满剩余空间 */
grid-template-rows: 100vh; /* 总高度与视窗高度相同 */
}
/* 左侧侧边栏样式 */
.sidebar {
background-color: #f0f0f0;
}
/* 右侧盒子的容器样式 */
.boxes {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
/* 右侧5个盒子样式 */
.box {
flex-grow: 1; /* 平分宽度 */
background-color: #ccc;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="sidebar">
<!-- 左侧侧边栏内容 -->
</div>
<div class="boxes">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</body>
</html>
```