如何在一个大的div中并列两个小的div
时间: 2024-04-18 22:30:24 浏览: 110
要在一个大的 `<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>` 或调整外边距等样式属性来满足你的要求。
阅读全文