Elementor如何实现并排等宽区块 解决区块自动换行问题

仅给区块设置max-width: 50%无法实现并排效果：块级元素默认会独占整行排布，没有给容器设置对应排布规则的前提下，第二个区块自然会落到第一个区块下方。

两种常用方案都能实现两个等宽区块左右并排的效果，按需选择即可：

方案1：Flex 布局（优先推荐） #

写法简洁，适配所有现代浏览器，不需要处理浮动塌陷问题：

• 给两个区块的共同父元素添加弹性布局属性
• 子区块设置固定50%宽度，开启怪异盒模型避免内边距/边框撑破布局

/* 两个区块的父容器 */
.wrapper {
  display: flex;
  /* 两个块之间需要留间距的话，加gap属性即可，比如gap: 16px; 记得同步调整子块宽度 */
}
/* 并排的两个区块通用样式 */
.block {
  width: 50%;
  box-sizing: border-box; /* *核心配置*：内边距、边框算在设定的宽度内，不会撑大元素 */
}

方案2：浮动布局（兼容极低版本浏览器） #

如果需要兼容IE这类老旧浏览器，可以用浮动实现，记得给父容器清除浮动避免高度塌陷：

/* 父容器清除浮动 */
.wrapper::after {
  content: "";
  display: block;
  clear: both;
}
/* 第一个区块靠左 */
.block:first-child {
  float: left;
  width: 50%;
  box-sizing: border-box;
}
/* 第二个区块靠右 */
.block:last-child {
  float: right;
  width: 50%;
  box-sizing: border-box;
}

• 不要只用max-width: 50%：这个属性只限制元素最大宽度，既不会强制元素占满50%宽度，也不会改变块级元素独占一行的默认特性
• 如果两个区块加了内边距、边框，必须加box-sizing: border-box，否则元素实际占用宽度会超过50%，导致第二个块被挤到下一行
• 如果要给两个区块之间留间距，Flex方案优先用gap控制，浮动方案可以给子块加对应左右外边距，同时按间距值调小子块宽度，保证两个块总占位宽度不超过父容器的100%

内容的提问来源于stack exchange，提问作者Zach