CSS写代码使页面划分为左右两个区域
您可以使用CSS的Flexbox布局来将页面分为两个区域。以下是一个简单的例子:
HTML:
<div class="container">
<div class="left-area">左侧区域</div>
<div class="right-area">右侧区域</div>
</div>
CSS:
.container {
display: flex;
}
.left-area {
flex: 1; /* 或者指定具体的宽度,比如 width: 200px; */
background-color: lightblue; /* 仅为了视觉效果 */
}
.right-area {
flex: 1; /* 或者指定具体的宽度,比如 width: 300px; */
background-color: lightgreen; /* 仅为了视觉效果 */
}
这段代码会创建一个容器 .container
,它里面包含两个子容器 .left-area
和 .right-area
。使用 flex: 1;
可以使得这两个区域平均分配容器的宽度。您也可以通过指定具体的宽度来控制区域的大小。
评论已关闭