如何在一个大的div中横向并列两个小的div
时间: 2024-04-18 16:30:22 浏览: 106
要在一个大的 `<div>` 中横向并列两个小的 `<div>`,可以使用 CSS 的布局技术,如 `float`、`flexbox` 或 `grid`。以下是一种使用 `flexbox` 布局的示例:
```html
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
}
.small-div {
flex: 1;
height: 200px;
background-color: #ccc;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="small-div"></div>
<div class="small-div"></div>
</div>
</body>
</html>
```
在上述示例中,`.container` 类设置为 `display: flex;`,这将创建一个使用 `flexbox` 布局的容器。这使得容器的子元素能够横向并列排列。
`.small-div` 类指定了小的 `<div>` 的样式。通过 `flex: 1;`,它们可以平均占据可用空间,使它们具有相同的宽度。你可以根据需要调整高度、背景颜色和其他样式属性。
通过以上代码,小的 `<div>` 元素将在大的 `<div>` 中横向并列显示,并且它们的宽度将自动调整以填充可用空间。你可以根据需要添加更多的小的 `<div>` 或调整外边距等样式属性来满足你的要求。