div分左右两个div实现 不使用flex
时间: 2023-12-04 13:05:16 浏览: 57
通过float实现两个div不换行
可以使用 float 属性来实现左右两个 div 的分布,具体实现步骤如下:
- 在 HTML 中添加两个 div,一个设置为左侧,一个设置为右侧。
- 给左侧的 div 设置 float: left; 属性,使其向左浮动。
- 给右侧的 div 设置 float: right; 属性,使其向右浮动。
- 为了防止浮动元素对其他元素的影响,可以在父元素上添加一个 clearfix 类,清除浮动。
示例代码如下:
```html
<style>
.left {
width: 50%;
float: left;
}
.right {
width: 50%;
float: right;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
</style>
<div class="clearfix">
<div class="left">左侧内容</div>
<div class="right">右侧内容</div>
</div>
```
阅读全文