使用Flexbox与JavaScript实现响应式两列布局的等高堆叠-html教程-PHP中文网

使用Flexbox与JavaScript实现响应式两列布局的等高堆叠

霞舞

发布： 2025-11-08 10:40:11

原创

907人浏览过

使用flexbox与javascript实现响应式两列布局的等高堆叠

本文探讨如何在响应式设计中实现两列布局的等宽等高堆叠。利用CSS Flexbox构建基础布局和媒体查询实现垂直堆叠，并通过JavaScript动态获取并同步列的尺寸，确保在不同屏幕尺寸下，包含视频和文本的两列始终保持宽度一致且高度相等，提供无缝的用户体验。

在现代网页设计中，响应式布局是不可或缺的一部分。当我们需要在不同屏幕尺寸下展示两列内容（例如，一列包含视频，另一列包含文本）时，一个常见的挑战是如何确保它们在横向排列时等高，以及在小屏幕上堆叠成一列时，依然保持等宽且等高。单纯依靠CSS Flexbox在某些复杂场景下（特别是当内容高度不确定，如嵌入式视频）可能无法完美实现等高效果。本教程将介绍一种结合Flexbox、媒体查询和JavaScript的综合解决方案，以实现精确的响应式两列等高堆叠。

基础布局：Flexbox与媒体查询

首先，我们使用CSS Flexbox来构建基础的两列布局。Flexbox提供了一个强大且灵活的方式来排列、对齐和分配容器内的空间。通过媒体查询，我们可以在特定屏幕尺寸下改变布局方向，实现列的垂直堆叠。

HTML 结构： 我们使用一个 page-wrapper2 作为最外层容器，内部包含一个 row 类作为 Flex 容器，再由两个 column 类包裹实际内容（blue-column 和 red-column）。为了方便JavaScript操作，我们为内部内容块添加了 id 属性。

<div class="page-wrapper2">
  <div class="row">
    <div class="column">
      <div class="blue-column" id="blue-column">
        <iframe width="100%" height="315" src="https://www.youtube.com/embed/YIOb5_WCsOY" title="YouTube video player"
          frameborder="0"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
          allowfullscreen></iframe>
      </div>
    </div>
    <div class="column">
      <div class="red-column" id="red-column">
        <h2>Red Column</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <button>Watch today</button>
      </div>
    </div>
  </div>
</div>

登录后复制

CSS 样式：row 类被设置为 display: flex，使其子元素 column 横向排列。column 类则被赋予 flex: 1，确保它们平分可用空间并保持等宽。媒体查询 @media screen and (max-width: 800px) 在屏幕宽度小于等于800px时，将 row 的 flex-direction 从 row 切换到 column，从而实现两列的垂直堆叠。height: 100% 被应用于内部内容块，以确保它们填充父容器的高度。

立即学习“Java免费学习笔记（深入）”；

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

查看详情

.page-wrapper2 {
  margin: 0px;
  border: 2px solid black; /* 仅为演示边框 */
}

.row {
  display: flex;
  flex-direction: row; /* 默认横向排列 */
  flex-wrap: wrap; /* 允许换行 */
  width: 100%;
}

.column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%; /* 初始基准宽度100% */
  flex: 1; /* 平分可用空间 */
}

.blue-column {
  background-color: blue; /* 仅为演示背景色 */
  height: 100%; /* 填充父容器高度 */
  padding: 40px;
  color: white; /* 文本颜色 */
}

.red-column {
  background-color: red; /* 仅为演示背景色 */
  height: 100%; /* 填充父容器高度 */
  padding: 40px;
  color: white; /* 文本颜色 */
}

/* 确保iframe响应式，移除底部空白 */
.blue-column iframe {
    display: block;
}

@media screen and (max-width: 800px) {
  .row {
    flex-direction: column; /* 小屏幕下垂直堆叠 */
  }
}

登录后复制

动态高度与宽度同步：JavaScript解决方案

尽管Flexbox可以帮助我们实现等宽布局和在小屏幕上的堆叠，但当内容（尤其是嵌入式视频）的高度不固定时，要使堆叠后的两列保持完全等高且等宽，纯CSS会变得复杂。这时，JavaScript就派上用场了。我们可以利用JavaScript在窗口大小变化时，动态地获取一列的计算样式，并将其应用到另一列上，从而实现高度和宽度的同步。

JavaScript 代码： 我们监听 window 对象的 resize 事件。当窗口大小发生变化时，会触发一个函数。在这个函数中：

我们通过 document.querySelector('#blue-column') 和 document.querySelector('#red-column') 获取到需要同步的两个内容块。
使用 window.getComputedStyle(bluecolumn) 获取 blue-column 的当前计算样式，包括其渲染后的高度和宽度。
将获取到的 height 和 width 值赋给 red-column 的 style 属性，从而使其与 blue-column 保持一致。

// 页面加载时执行一次，确保初始状态正确
window.onload = () => {
  syncColumnSizes();
};

// 窗口大小改变时执行
window.onresize = () => {
  syncColumnSizes();
};

function syncColumnSizes() {
  const bluecolumn = document.querySelector('#blue-column');
  const redcolumn = document.querySelector('#red-column');

  // 确保元素存在，避免脚本错误
  if (!bluecolumn || !redcolumn) {
    console.warn('One or both columns not found for synchronization.');
    return;
  }

  const elementComputedStyle = window.getComputedStyle(bluecolumn);
  redcolumn.style.height = elementComputedStyle.height;
  redcolumn.style.width = elementComputedStyle.width;
}

登录后复制

注意： getComputedStyle() 方法返回的是一个只读的 CSSStyleDeclaration 对象，包含了元素的所有最终计算样式。这对于获取元素在浏览器中实际渲染后的尺寸非常有用。

完整示例代码

将上述HTML、CSS和JavaScript代码整合，即可得到一个完整的响应式两列等高堆叠解决方案。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>响应式两列等高堆叠教程</title>
  <style>
    /* CSS 样式 */
    .page-wrapper2 {
      margin: 0px;
      border: 2px solid black;
    }

    .row {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      width: 100%;

登录后复制

以上就是使用Flexbox与JavaScript实现响应式两列布局的等高堆叠的详细内容，更多请关注php中文网其它相关文章！