本文将详细指导您如何在elementor pro页面构建器中创建并排的两列布局。我们将首先介绍elementor内置的列系统这一最便捷且推荐的方法，确保响应式设计；随后，针对需要更精细控制的场景，我们将深入探讨如何利用现代css flexbox技术实现自定义并排布局，并解释其优于传统浮动布局的原因，提供实用的代码示例和应用技巧。

在网页设计中，将内容并排显示是常见的布局需求，尤其是在创建响应式、美观的页面时。Elementor Pro作为一款强大的页面构建器，提供了多种实现方式。本教程将为您详细解析两种主要方法：Elementor内置的列系统和自定义CSS Flexbox，帮助您根据具体需求选择最合适的方案。

Elementor Pro内置列系统：实现并排布局的首选方案

对于大多数Elementor用户而言，使用其内置的列系统是实现并排布局最简单、最稳定且响应式友好的方法。这种方式无需编写任何代码，通过拖放操作即可完成。

1. 添加新区块 (Section)： 在Elementor编辑器中，点击页面上的“+”图标，选择添加一个新的“区块”（Section）或“容器”（Container）。Elementor 3.0+版本推荐使用“容器”以获得更好的Flexbox控制。

2. 选择列结构：

   • 对于“区块” (Section) 模式： 添加区块后，Elementor会提示您选择一个列结构。选择“两列”结构（例如，50/50、30/70等），系统会自动为您创建两个并排的列。
   • 对于“容器” (Container) 模式： 添加一个主容器后，将其“方向”设置为“行”（Row）。然后，在主容器内拖入两个“内容器”（Inner Container）。默认情况下，这两个内容器就会并排显示。为了确保它们各占一半宽度，您可以为每个内容器设置“宽度”为“50%”。

3. 调整列宽： 无论是“区块”中的列还是“容器”中的内容器，您都可以通过拖动列之间的分隔线，或者在“布局”选项卡中精确设置每个列的百分比宽度来调整其大小。

4. 添加内容： 将您希望并排显示的小工具（Widgets）拖放到相应的列或内容器中即可。

优势：

• 无需代码： 纯图形化操作，适合所有技能水平的用户。
• 自动响应式： Elementor的列系统会自动处理不同设备上的布局，您也可以在编辑模式下切换到平板或手机视图进行微调。
• 易于维护： 布局结构清晰，后期修改方便。

使用自定义CSS Flexbox实现并排布局（高级方法）

尽管Elementor内置的列系统功能强大，但在某些特殊场景下，您可能需要更精细的控制，或者希望理解其底层实现原理。此时，使用自定义CSS Flexbox是最佳选择。Flexbox是一种现代CSS布局模块，它提供了更强大、更灵活的方式来设计页面上的元素排列，并且在响应式设计方面表现出色。

Flexbox vs. Float：为何选择Flexbox

在过去，float 属性常用于创建并排布局。然而，float 并非为布局而生，它最初用于文本环绕图片。使用 float 布局存在许多问题，例如需要清除浮动、难以处理垂直居中、响应式调整复杂等。Flexbox则专门为一维布局设计，提供了更直观、更强大的控制能力，并且具有出色的响应式表现。因此，强烈建议避免使用 float 进行布局，转而采用Flexbox。

Flexbox基本原理

Flexbox布局包含一个“容器”（Flex Container）和若干个“项目”（Flex Items）。通过对容器和项目的CSS属性设置，可以控制项目的排列方向、对齐方式、尺寸分配等。

• 容器属性： display: flex; 是激活Flexbox布局的关键。
• 项目属性： flex-grow、flex-shrink、flex-basis（通常简写为 flex）以及 width 等用于控制项目在容器内的尺寸和伸缩行为。

Elementor中应用Flexbox的步骤

假设您想让两个Elementor区块（或任何具有特定选择器的元素）并排显示，您可以按照以下步骤操作：

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

1. HTML结构（Elementor中的“容器”或“区块”）： 在Elementor中，每个区块或容器都有一个唯一的CSS ID或类。为了实现并排，我们需要一个共同的父级容器来包裹这两个要并排的元素。

   例如，如果您有两个Section，可以考虑将它们放在一个Elementor的“容器”中，或者为这两个Section的父级元素（如果它们共享一个父级）添加一个自定义CSS类。更常见的情况是，您会在一个Section内部创建两个“内Section”或“内容器”，并为它们的父级Section或容器应用Flexbox。

   为了演示，我们假设我们有两个DIV，它们是某个父级容器的子元素。在Elementor中，您可以给一个Section或容器一个自定义CSS ID，例如 container，然后在这个 container 内部放置两个“基本容器”或“内Section”，并分别给它们 left 和 right 的CSS ID。

   <!-- 模拟 Elementor 中具有自定义 ID 的容器结构 -->
   <div id="container">
     <div id="left">
       <!-- 第一个并排区块的内容 -->
     </div>
     <div id="right">
       <!-- 第二个并排区块的内容 -->
     </div>
   </div>

2. CSS代码示例及解释：

   以下是实现两个元素并排的Flexbox CSS代码：

   /* 全局重置，确保布局不受浏览器默认样式影响 */
   body, html {
       margin: 0;
       padding: 0;
   }
   
   /* 容器：激活Flexbox布局，使其子元素并排 */
   #container {
       display: flex; /* 关键：将容器变为Flex容器 */
       /* 可以根据需要添加其他Flexbox属性，例如： */
       /* justify-content: space-between;  子元素之间留有空间 */
       /* align-items: flex-start;  子元素顶部对齐 */
       /* flex-wrap: wrap;  当空间不足时允许子元素换行 */
   }
   
   /* 项目：设置每个并排元素的宽度 */
   #left, #right {
       width: 50%; /* 每个元素占据容器宽度的50% */
       /* flex-grow: 1;  如果希望它们自动填充可用空间，也可以使用这个 */
       /* height: 100vh;  示例中为演示效果设置了高度，实际项目中根据内容调整 */
       /* background-color: blue; / background-color: red;  仅为演示效果 */
   }
   
   /* 针对特定Elementor元素的选择器 */
   /* 如果你的Elementor Section或Container有特定的类或ID，请使用它们 */
   /* 假设你的父级Section的CSS ID是 'my-side-by-side-section' */
   /* 并且其直接子元素（Elementor的Column或Inner Container）是你要并排的 */
   /* 你可能需要检查Elementor生成的实际DOM结构来确定正确的选择器 */
   /* 例如： */
   /* #my-side-by-side-section > .elementor-container { */
   /*     display: flex; */
   /* } */
   /* #my-side-by-side-section > .elementor-container > .elementor-column, */
   /* #my-side-by-side-section > .elementor-container > .elementor-inner-container { */
   /*     width: 50%; */
   /* } */

   代码解释：

   • body, html { margin: 0; padding: 0; }：这是一个良好的实践，用于消除浏览器默认的边距和内边距，确保布局从零开始。
   • #container { display: flex; }：这是核心。它将ID为 container 的元素转换为一个Flex容器，使其直接子元素（#left 和 #right）按照Flexbox规则排列。默认情况下，Flex项目会水平并排。
   • #left, #right { width: 50%; }：为每个Flex项目（#left 和 #right）设置宽度为父容器的50%。这样它们就能各占一半空间并排显示。

3. 如何在Elementor中添加自定义CSS：

   • 针对单个区块/容器： 选择您要应用CSS的Elementor区块或容器，进入其“高级”选项卡，找到“自定义CSS”区域。将上述CSS代码粘贴到此处。请注意，这里的 selector 关键字代表当前被选中的元素本身。如果您要为子元素应用样式，可能需要使用 selector .your-child-class 或 selector > .your-child-class。
   • 全局CSS： 如果您希望这些样式应用于多个地方或作为网站的通用样式，可以进入Elementor编辑器左侧面板的“站点设置”>“自定义CSS”，将代码粘贴到那里。

注意事项与最佳实践

• 响应式设计考量：

  • Elementor内置列系统： 自动处理响应式。您只需在Elementor编辑器的响应式模式下调整列堆叠顺序或宽度即可。
  • 自定义Flexbox： 虽然Flexbox本身是响应式友好的，但如果您为 width 设置了固定值，可能需要在媒体查询中进行调整。例如，在小屏幕上，您可能希望将 width: 50%; 改为 width: 100%; 并让它们垂直堆叠。

    @media (max-width: 768px) { /* 针对平板及以下设备 */
        #container {
            flex-direction: column; /* 让子元素垂直堆叠 */
        }
        #left, #right {
            width: 100%; /* 各自占据100%宽度 */
        }
    }

• 维护性与可读性：

  • 尽量使用Elementor内置功能，它们通常更稳定、更易于理解和维护。
  • 如果必须使用自定义CSS，请确保代码清晰、有注释，并遵循命名规范。
  • 避免过度使用 !important 关键字，它会使CSS难以调试和覆盖。

• 何时选择内置功能，何时选择自定义CSS：

  • 选择内置功能： 当您的布局需求是标准的（如两列、三列等），且Elementor的列系统能满足响应式和样式调整时。这是大多数情况下的推荐做法。
  • 选择自定义CSS： 当您需要实现Elementor内置功能无法提供的复杂布局，例如非均匀的Flex项目伸缩、特定的对齐方式、或对DOM结构有非常精细的控制时。

总结

在Elementor Pro中实现两列并排布局，最推荐且最便捷的方法是利用其强大的内置列系统。它提供了无代码的拖放体验，并自动处理响应式设计。然而，对于那些追求极致控制或面临特殊布局挑战的用户，掌握CSS Flexbox是必不可少的技能。通过理解Flexbox容器和项目的属性，您可以创建任何复杂的并排布局，并确保其在各种设备上的完美呈现。始终优先考虑Elementor的内置功能，并在需要时，巧妙地运用自定义CSS Flexbox来扩展您的设计可能性。