将一个div盒子实现两栏布局
时间: 2023-12-10 22:40:40 浏览: 78
边框的其他属性-div+css网页布局
可以使用CSS中的float和width属性来实现一个div盒子的两栏布局,示例代码如下:
```
<style>
.container {
width: 100%;
}
.left {
float: left;
width: 30%;
}
.right {
float: right;
width: 70%;
}
</style>
<div class="container">
<div class="left">左侧内容</div>
<div class="right">右侧内容</div>
</div>
```
在上述代码中,通过设置左侧的div的float属性为left,设置其宽度为30%;右侧的div的float属性为right,设置其宽度为70%。这样,就可以实现一个div盒子的两栏布局。同时,需要注意设置container的宽度为100%,使其可以占据整个父元素的宽度。
阅读全文