如何在保持列背景颜色全尺寸的同时创建 2 列布局？

在创建网页布局时，有时需要让网页中的不同部分呈现出不同的颜色，同时还需要将网页分为多列。本文将介绍如何在保持列背景颜色全尺寸的同时创建 2 列布局。

HTML 结构

首先，我们需要使用 HTML 创建基本的结构。我们将使用一个 div 元素来包含两个列元素，每个列元素将使用一个 div 来定义。在这两个列元素的外层，可以使用任何标准的 HTML 元素，例如 body, header, section 等。

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

CSS 样式

对于上面的 HTML 结构，我们需要添加 CSS 样式来定义我们的布局。以下是完整的 CSS 代码：

.container {
  display: flex;
}

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

.col.right {
  flex-grow: 1;
  background-color: #ffffff;
}

首先，我们将 .container 元素设置为 display: flex;，以便布局元素变为 flex 布局。然后，我们指定了左侧列元素的 CSS 样式。左侧元素的宽度为 30%，并且具有灰色的背景颜色。接下来，我们将 .col.right 元素的 flex-grow 属性设置为 1，以便在窗口调整大小时充满剩余的屏幕空间，并具有白色的背景颜色。

最后，此布局允许我们将两个列的背景颜色延伸到屏幕的全尺寸，从而实现了在保持列背景颜色全尺寸的同时创建 2 列布局。

总结

在这篇文章中，我们讨论了如何在保持列背景颜色全尺寸的同时创建 2 列布局。通过使用 HTML 和 CSS，我们可以轻松地创建这种布局，使网页更具吸引力和可读性。