同一div内flex box与table无法横向对齐问题求助

问题描述 #

需要将main-rail元素作为侧边栏，与game modes和factions元素并排显示，但尝试grid布局时元素移出屏幕，float:right仅能将main-rail移至factions右侧，vertical-align无效果，二者无法横向对齐。

问题根源 #

1. HTML结构错误：main-rail当前嵌套在factions的子容器中，导致无法与上方的game-modes整体并排
2. 缺少统一的父容器布局控制：没有给包含主内容和侧边栏的父元素设置合适的弹性布局或网格布局

解决方案 #

步骤1：调整HTML结构

将main-rail从factions容器中移出，与包含game-modes和factions的容器放在同一个父级下，并给这个父级添加类名content-container，用于布局控制。

步骤2：修改CSS样式

给content-container设置弹性布局，分配主内容区和侧边栏的宽度，同时添加响应式适配。

修改后的完整代码 #

CSS代码

body {
  background-color: #2f2f2f;
  color: white;
}

.box {
  border: solid;
}

.header-text {
  font-family: 'Philosopher';
  font-size: 35px;
}

.subheading-text {
  font-family: 'Roboto';
  font-size: 20px;
}

.sub-heading {
  text-align: center;
  font-family: 'Roboto';
  font-size: 25px;
  font-weight: bold;
}

.page-content :is(h4) .mw-headline {
  font-family: 'Philosopher';
  font-size: 35px;
  border-bottom: solid 5px;
  border-top: solid 5px;
  padding-top: 20px;
  padding-bottom: 20px;
  width: 100%;
}

.subtext {
  text-align: center;
  font-family: 'Roboto';
  font-size: 10px;
  font-weight: bold;
}

.titles {
  font-family: 'Philosopher', sans-serif;
  font-size: 35px;
  height: 2px;
  text-align: center;
  line-height: 0.5;
}

/* 新增的容器布局 */
.content-container {
  display: flex;
  gap: 20px; /* 主内容和侧边栏之间的间距 */
  flex-wrap: wrap; /* 小屏幕下自动换行 */
}

.main-content {
  flex: 1 1 80%; /* 主内容占80%宽度，可伸缩 */
}

.main-rail {
  display: flex;
  flex-flow: column wrap;
  flex: 1 1 20%; /* 侧边栏占20%宽度，可伸缩 */
}

.main-rail > div {
  text-align: center;
  border: solid;
  margin-bottom: 10px; /* 侧边栏内元素间距 */
}

HTML代码

<div class="box">
  <div class="content-container">
    <!-- 主内容区：包含Game Modes和Factions -->
    <div class="main-content">
      <div class="game-modes">
        <table style="display:flex; justify-content:center;">
          <tr>
            <td><img src="./images/Border.png" alt=""></td>
          </tr>
          <tr>
            <td class="titles">Game Modes</td>
          </tr>
          <tr>
            <td><img src="./images/Border.png" alt=""></td>
          </tr>
        </table>
        <p></p>
        <div style="display:flex; flex-wrap:wrap; flex-direction:row; justify-content:center;">
          <div style="flex-basis:96px"><img src="./images/Casual_Full_Size.webp" width="200px" height="179px" alt="">
            <div class="sub-heading">CASUAL<br /></div>
          </div>
          <div style="flex-basis:96px"><img src="./images/Game_Mod_Ranked_200px.webp" width="200px" height="179px" alt="">
            <div class="sub-heading">RANKED<br /></div>
          </div>
          <div style="flex-basis:96px"><img src="./images/Game_Mod_Custom_200px.webp" width="200px" height="179px" alt="">
            <div class="sub-heading">CUSTOM<br /></div>
          </div>
        </div>
      </div>
      <div>
        <div class="factions">
          <table style="display:flex; justify-content:center;">
            <tr>
              <td><img src="./images/Border.png" alt=""></td>
            </tr>
            <tr>
              <td class="titles">Factions</td>
            </tr>
            <tr>
              <td><img src="./images/Border.png" alt=""></td>
            </tr>
          </table>
          <p></p>

          <div style="display:flex; flex-wrap:wrap; flex-direction:row; justify-content:center;">
            <div style="flex-basis:96px"><img src="./images/Emblem_Vestige.webp" width="209px" height="209px" alt="">
              <div class="sub-heading">VESTIGE<br /></div>
            </div>
            <div style="flex-basis:96px"><img src="./images/Emblem_Drakkorith.webp" width="209px" height="209px" alt="">
              <div class="sub-heading">DRAKKORITH<br /></div>
            </div>
            <div style="flex-basis:96px"><img src="./images/Emblem_Ascended.webp" width="209px" height="209px" alt="">
              <div class="sub-heading">ASCENDED<br /></div>
            </div>
            <div style="flex-basis:96px"><img src="./images/Emblem_Oblivion.webp" width="209px" height="209px" alt="">
              <div class="sub-heading">OBLIVION<br /></div>
            </div>
            <div style="flex-basis:96px"><img src="./images/Emblem_Neutral.webp" width="209px" height="209px" alt="">
              <div class="sub-heading">NEUTRAL
                <div class="subtext"><br />(Not a playable Faction)</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 侧边栏：main-rail -->
    <div class="main-rail">
      <div><img src="./images/Site-background-dark.webp" alt=""></div>
      <div>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestiae quos sapiente accusantium ipsam rem corporis aliquam quam temporibus voluptatibus id non labore maiores unde, illo earum facere, deleniti magnam reprehenderit?</div>
      <div>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestiae quos sapiente accusantium ipsam rem corporis aliquam quam temporibus voluptatibus id non labore maiores unde, illo earum facere, deleniti magnam reprehenderit?</div>
    </div>
  </div>
</div>

说明 #

• 通过content-container的flex布局实现主内容与侧边栏的横向排列
• 使用flex: 1 1 [宽度比例]让两个区域在不同屏幕尺寸下自适应伸缩
• flex-wrap: wrap保证在小屏幕设备上，侧边栏会自动换行到主内容下方，避免溢出屏幕

内容的提问来源于stack exchange，提问作者Lara-Daisy Lowndes