左右两个div灰色背景,中间没间隔
时间: 2023-07-01 19:26:40 浏览: 113
DIV遮蔽背景显示层,背景为灰色并不可编辑
5星 · 资源好评率100%
您可以使用CSS实现左右两个div灰色背景,中间没有间隔的效果。具体代码如下:
HTML代码:
```
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
```
CSS代码:
```
.container {
display: flex;
}
.left, .right {
flex: 1;
background-color: gray;
}
.right {
margin-left: -1px;
}
```
解释一下:
首先,我们使用flex布局来让左右两个div并排显示。然后,给左右两个div设置相同的flex属性,使它们平分容器的宽度。接着,我们给左右两个div设置相同的灰色背景色。最后,为了消除中间的间隔,我们对右侧的div设置了一个负的margin-left值,使它与左侧的div紧密相连。
阅读全文