创建两列布局，同时保持列背景颜色全尺寸

在两列布局中，内容被组织成两列等宽的列。但是，确保每列的背景颜色填充内容的整个高度可能是一个挑战，尤其是在每列的内容长度不同时。

CSS 网格是创建具有多列的响应式布局的另一种选择。较旧的布局方法，例如浮动和基于表格的布局，也可以使用，但不推荐，因为它们有局限性和缺乏灵活性。

算法

  • 定义一个包装类，其 display 属性设置为 flex。这将为两列创建一个 flex 容器。

  • 定义左列类，其 flex-grow 属性设置为 1。这将使左列填充容器中的可用空间。另外，设置左列的背景颜色。

  • 定义右列类，其 flex-grow 属性设置为 1。这将使右列填充容器中的可用空间。另外，设置右列的背景颜色。

  • 将左列内容和右列内容添加到包装元素中。

  • 最终结果是一个两列等宽的布局，左列为红色 (#e62626)，右列为较深的红色 (#864f4f)。

示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Two Column Layout</title>
<!------------------------- CSS ---------------------------->
<style>

  /* Define a flex container with the wrapper class */
  .wrapper {
  display: flex;
  }

  /* Define the left column with flex-grow set to 1 to fill the available space, and set the background color */
  .left-column {
  flex: 1;
  background-color: #e62626;
  }

  /* Define the right column with flex-grow set to 1 to fill the available space, and set the background color */
  .right-column {
  flex: 1;
  background-color: #864f4f;
  }

</style>

</head>

<body>
  
  <div class="wrapper">
    <div class="left-column">
      <!-- content for the left column -->
      <h1>Left column</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum dolorem ab magni rerum. Molestiae facere libero ut magnam, accusamus id voluptas eligendi officiis a harum eaque, autem obcaecati? Distinctio, recusandae.</p>
    </div>
    <div class="right-column">
      <!-- content for the right column -->
      <h1>Right column</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae necessitatibus beatae ullam reiciendis aliquid dolorum explicabo quod consectetur deleniti, maxime quo laudantium sed vel iure nemo! In molestiae aliquid quasi?</p>
    </div>
  </div>

</body>
</html>

然而，这并不适用于需要精确控制元素放置的复杂布局或设计。对不支持 CSS3 flexbox 的旧版浏览器支持有限。这需要仔细考虑内容层次结构，以确保在较小屏幕上正确排列列。一旦实现，更改布局可能很困难。

结论

您需要考虑一些约束条件

  • CSS 约束：要保持每列的背景颜色全尺寸，需要使用 clearfix hack 或使用 flexbox 或网格布局。

  • 内容约束：每列的内容需要适合列的宽度和高度，否则可能会破坏布局。

  • 响应式设计约束：您需要确保两列布局具有响应性，并且在不同的屏幕尺寸上都能正常工作。

  • 辅助功能约束：确保布局可供残疾用户访问非常重要。

  • 浏览器兼容性约束。

请记住彻底测试您的布局，并根据需要进行调整，直到您对结果满意为止。

更新于：2023年8月18日

240 次浏览

启动您的职业生涯

通过完成课程获得认证

开始
广告