使用浮动布局 和 定位布局 分别实现三列布局
时间: 2023-07-11 13:30:16 浏览: 62
使用浮动布局实现三列布局的代码如下:
HTML代码:
```html
<div class="container">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
```
CSS代码:
```css
.container {
width: 100%;
}
.left {
width: 30%;
float: left;
background-color: red;
}
.middle {
width: 40%;
float: left;
background-color: green;
}
.right {
width: 30%;
float: right;
background-color: blue;
}
```
使用定位布局实现三列布局的代码如下:
HTML代码:
```html
<div class="container">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
```
CSS代码:
```css
.container {
width: 100%;
position: relative;
}
.left {
width: 30%;
position: absolute;
left: 0;
top: 0;
background-color: red;
}
.middle {
width: 40%;
position: absolute;
left: 30%;
top: 0;
background-color: green;
}
.right {
width: 30%;
position: absolute;
right: 0;
top: 0;
background-color: blue;
}
```