盒子做布局
时间: 2023-07-18 15:03:41 浏览: 44
盒子布局是一种常见的网页布局方式,使用 HTML 和 CSS 实现。它基于盒子模型,通过设置盒子的属性来控制元素的位置和大小。
下面是一个简单的示例,展示了如何使用盒子布局将两个 div 元素放在同一行中:
```html
<!DOCTYPE html>
<html>
<head>
<title>盒子布局示例</title>
<style>
.container {
display: flex; /* 设置容器为弹性布局 */
flex-direction: row; /* 设置子元素在同一行 */
justify-content: space-between; /* 设置子元素之间的间隔为相等的空间 */
align-items: center; /* 设置子元素在垂直方向上居中 */
background-color: #eee;
padding: 20px;
}
.box {
width: 100px;
height: 100px;
background-color: #ccc;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
```
在这个示例中,我们首先创建了一个容器 div,将其设置为弹性布局并通过 flex-direction 属性指定子元素在同一行。然后,我们使用 justify-content 属性将子元素之间的间隔设置为相等的空间,并使用 align-items 属性将子元素在垂直方向上居中。最后,我们创建了两个子元素 div,设置它们的宽度和高度,以及背景颜色,最终实现了将两个盒子放在同一行中的效果。