W3.CSS框架问题：如何实现两列等宽对齐

使用W3.CSS框架时，想要让两个并列的区块实现等宽布局，遇到以下问题：

• 给区块加w3-left和w3-right类时，区块仅根据内部文本宽度自适应，无法等宽
• 尝试使用w3-half类，却出现两区块重叠的情况，即使移除边距、内边距也无法解决

请问仅通过W3.CSS框架能否实现两列等宽对齐，还是需要额外自定义CSS？

现有代码片段 #

<section class="home-section w3-mobile w3-auto w3-row">
    <main class="main-article w3-margin w3-border w3-display-container w3-display-top">
        <div>
            <h4>Title</h3>
            <p>Writing</p>
        </div>
    </main>
    <div class="subs w3-row">
    <section class="sub-article-1 w3-margin w3-border w3-display-container w3-left">
        <div>
            <h6>Title</h6>
            <p>Writing here lots of thingz</p>
        </div>
    </section>
    <section class="sub-article-2 w3-margin w3-border w3-display-container w3-right">
        <div>
            <h6>Title</h6>
            <p>Writing</p>
        </div>
    </section>
    </div>
</section>

完全可以仅通过W3.CSS框架实现两列等宽，问题出在对框架网格类的使用方式上：

核心问题分析 #

1. w3-left/w3-right是浮动定位类，仅控制元素左右位置，不定义宽度，因此会自适应内容宽度
2. 使用w3-half时重叠，是因为同时混用了浮动类，且w3-row容器的子元素需直接使用宽度类，不能混合浮动属性

正确实现代码 #

将两个子区块的w3-left/w3-right替换为w3-half，同时调整间距控制方式：

• 移除浮动类，避免布局冲突
• 用w3-padding替代w3-margin（w3-half已设置50%宽度，margin会超出容器导致换行或重叠）

修改后的代码：

<section class="home-section w3-mobile w3-auto w3-row">
    <main class="main-article w3-margin w3-border w3-display-container w3-display-top">
        <div>
            <h4>Title</h4> <!-- 修复标签闭合错误：h4对应/h4 -->
            <p>Writing</p>
        </div>
    </main>
    <div class="subs w3-row">
        <!-- 替换浮动类为w3-half，用padding控制内部间距 -->
        <section class="sub-article-1 w3-half w3-padding w3-border w3-display-container">
            <div>
                <h6>Title</h6>
                <p>Writing here lots of thingz</p>
            </div>
        </section>
        <section class="sub-article-2 w3-half w3-padding w3-border w3-display-container">
            <div>
                <h6>Title</h6>
                <p>Writing</p>
            </div>
        </section>
    </div>
</section>

补充说明 #

• W3.CSS的w3-row是弹性布局容器，w3-half类会自动设置子元素为50%宽度，默认无浮动，不会出现重叠
• 若需要列间距，可给subs容器添加w3-gap类（W3.CSS v4+支持），比如w3-gap-4来设置统一的列间距
• 原代码中存在标签闭合错误：<h4>Title</h3>需改为<h4>Title</h4>，避免潜在布局异常

内容的提问来源于stack exchange，提问作者Mag Millen-Dutka