浮动布局和弹性布局实现左右布局
时间: 2023-11-16 14:56:59 浏览: 47
浮动布局和弹性布局都可以实现左右布局,下面分别介绍一下它们的实现方法:
浮动布局实现左右布局:
可以使用左浮动和右浮动来实现左右布局,中间部分可以使用BFC(块级格式化上下文)来清除浮动,使其不受浮动元素的影响。具体实现方法如下:
```
<style>
.left {
float: left;
width: 100px;
height: 100px;
background-color: red;
}
.right {
float: right;
width: 100px;
height: 100px;
background-color: blue;
}
.middle {
overflow: hidden;
}
</style>
<div class="left"></div>
<div class="right"></div>
<div class="middle"></div>
```
弹性布局实现左右布局:
可以使用flex布局来实现左右布局,具体实现方法如下:
```
<style>
.container {
display: flex;
justify-content: space-between;
}
.left {
width: 100px;
height: 100px;
background-color: red;
}
.right {
width: 100px;
height: 100px;
background-color: blue;
}
</style>
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
```