6个div元素,在浏览器中排列成两行,每一行三个div,并且给这六个div设置不同的颜色
时间: 2024-04-16 18:29:31 浏览: 9
您可以使用CSS的flexbox布局来实现这个需求。下面是一个示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
flex-wrap: wrap;
}
.container > div {
width: 33.33%;
height: 100px;
box-sizing: border-box;
}
.div1 {
background-color: red;
}
.div2 {
background-color: orange;
}
.div3 {
background-color: yellow;
}
.div4 {
background-color: green;
}
.div5 {
background-color: blue;
}
.div6 {
background-color: purple;
}
</style>
</head>
<body>
<div class="container">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
<div class="div6"></div>
</div>
</body>
</html>
```
在上面的代码中,我们使用了`display: flex;`来创建一个flex容器,并使用`flex-wrap: wrap;`来指定子元素换行。每个子元素使用`width: 33.33%;`来占据父容器的三分之一宽度。然后,通过为每个子元素添加不同的类名,并在CSS中为类名设置不同的背景颜色,即可实现给六个div设置不同的颜色。