div分左右两个div实现 不使用flex
时间: 2023-12-04 08:05:16 浏览: 112
通过float实现两个div不换行
可以使用浮动和定位来实现左右两个div的分离。具体做法如下:
HTML代码:
```html
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
```
CSS代码:
```css
.container {
position: relative;
}
.left {
width: 50%;
height: 100px;
background-color: #ccc;
float: left;
}
.right {
width: 50%;
height: 100px;
background-color: #ddd;
position: absolute;
top: 0;
right: 0;
}
```
在这个例子中,我们给容器设置了相对定位,然后给左侧的div设置了浮动,宽度为50%。右侧的div则使用了绝对定位,宽度同样为50%,并且定位到容器的右上角。这样就可以实现左右两个div的分离了。
阅读全文