如何将两个<h3>标题区块设置为左右两列布局？

开发者阿泽

2026-7-9

解决技能模块左右两列布局问题

问题说明

我需要将“Coding Skills”和“Professional Skills”两个模块设置为左右两列布局，但目前后者显示在前者正下方，无法实现并排效果。

问题原因

你的HTML结构中，两个技能列分别放在了独立的.skills-row容器里，而.skills-row作为flex容器，每个独立容器只会内部排列子元素，所以两个列自然垂直堆叠。

修复方案

将两个.skills-column放入同一个.skills-row容器中，这样flex布局就能让它们按照设置的宽度并排显示：

修改后的HTML代码

<section class="skills" id="skills">
  <h2 class="heading">My <span>Skills</span></h2>

  <div class="skills-row">
    <div class="skills-column">
      <h3 class="title">Coding Skills</h3>
      <div>-- Coding Skills Content --</div>
    </div>
    <div class="skills-column">
      <h3 class="title">Professional Skills</h3>
      <div>-- Professional Skills Content --</div>
    </div>
  </div>
</section>

保留原有CSS代码（无需修改）

.skills {
  min-height: auto;
  padding-bottom: 7rem;
  background: var(--second-bg-color);
}

.skills .skills-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5rem;
}

.skills-row .skills-column {
  flex: 1 1 calc(50% - 2.5rem);
  max-width: calc(50% - 2.5rem);
  box-sizing: border-box;
}

.skills-box .skills-content {
  position: relative;
  border: .2rem solid var(--main-color);
  border-radius: .6rem;
  padding: .5rem 1.5rem;
}

.skills-column .title {
  font-size: 2rem;
  margin: 0 0 1.5rem;
}

.skills-content .progress {
  padding: 1rem 0;
}

.skills-content .progress h3 {
  font-size: 1.7rem;
  display: flex;
  justify-content: space-between;
}