如何使包含两列的div跨越整个页面宽度

要使包含两列的div跨越整个页面宽度，可以使用CSS中的flexbox布局或者grid布局来实现。

1. 使用flexbox布局：
   • 在父容器上设置display为flex，使其成为一个flex容器。
   • 设置flex容器的flex-wrap属性为wrap，以便在需要时换行。
   • 设置每个子元素的flex属性为1，使它们平均分配父容器的宽度。
   • 设置子元素的margin属性为0，以消除默认的间距。
   • 设置子元素的width属性为100%，使其占满父容器的宽度。

示例代码如下：

<div class="container">
  <div class="column"></div>
  <div class="column"></div>
</div>

.container {
  display: flex;
  flex-wrap: wrap;
}

.column {
  flex: 1;
  margin: 0;
  width: 100%;
}

1. 使用grid布局：
   • 在父容器上设置display为grid，使其成为一个grid容器。
   • 设置grid容器的grid-template-columns属性为1fr 1fr，将父容器分为两列，每列宽度相等。
   • 设置子元素的grid-column属性为span 2，使其跨越两列。

示例代码如下：

<div class="container">
  <div class="column"></div>
  <div class="column"></div>
</div>

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.column {
  grid-column: span 2;
}

以上是两种常用的方法，可以根据具体需求选择适合的布局方式。