利用vscode创建一个容器并在其中再添加两个容器间距15px,要求三个容器的背景颜色各不相同
时间: 2024-05-09 13:22:05 浏览: 17
好的,根据您的要求,我可以提供以下代码示例:
HTML代码:
```html
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
```
CSS代码:
```css
body {
margin: 0;
padding: 0;
}
.container {
display: flex;
justify-content: space-between;
background-color: #efefef;
padding: 15px;
}
.box1 {
width: 100px;
height: 100px;
background-color: #e0a0a0;
}
.box2 {
width: 100px;
height: 100px;
background-color: #a0e0a0;
margin: 0 15px;
}
.box3 {
width: 100px;
height: 100px;
background-color: #a0a0e0;
}
```
以上代码的解释:
- body标签的margin和padding都被设置为0,以避免出现不必要的空白。
- container类的display属性被设置为flex,以便使用flexbox布局实现均匀分布的容器。justify-content属性被设置为space-between,以便在容器之间留有空白。
- box1、box2和box3类分别对应三个不同的容器。它们都具有相同的宽度和高度,并且分别具有不同的背景颜色。
- box2类的margin属性被设置为15px,以留下左右两边的空白,同时使三个容器之间距离相等。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)