div 左右布局

在网页布局中，经常需要将内容分为左右两个部分，此时可以采用 div 左右布局。具体实现方法是通过 div 元素将两个部分分隔开，再对两个 div 元素进行 CSS 样式设置。

HTML 代码

<div class="container">
  <div class="left">左侧内容</div>
  <div class="right">右侧内容</div>
</div>

CSS 样式

.container {
  display: flex;
}

.left {
  width: 30%;
  background-color: #f1f1f1;
}

.right {
  width: 70%;
  background-color: #d9d9d9;
}

解析

• 使用 .container 类设置整个容器的样式，其中 display 属性设置为 flex，表示使用 Flex 布局。
• .left 和 .right 类分别设置左侧和右侧部分的样式，其中 width 表示元素的宽度，取值为百分比或像素值，两者之和不能超过 100%。
• background-color 属性用于设置元素的背景颜色，可以取 RGB 值、十六进制值或颜色名等。

结果展示

<div class="container">
  <div class="left">左侧内容</div>
  <div class="right">右侧内容</div>
</div>