Grid布局异常：两列下移横向排列的修复咨询

问题根源 #

你的HTML结构存在错误：中间竖线列和右侧内容列被嵌套在左侧内容列内部，导致Grid容器.two_column仅识别到一个直接子元素，无法触发预设的三列布局；同时内部的.main_column是flex纵向布局，使得嵌套的列被迫变成横向排列并下移。另外.content的绝对定位会脱离文档流，导致父元素高度塌陷，进一步打乱整体布局。

修复步骤 #

1. 调整HTML结构：将#vertical-line和#second_column从#first_column中移出，作为.two_column的直接子元素，让Grid容器能正确分配三列空间。
2. 修正CSS样式：
   • 移除#vertical-line中不必要的display: flex和flex-direction: column属性，仅保留边框样式，让它自适应Grid列的高度。
   • 删除.content的position: absolute，调整宽度为合适值（比如70%），避免元素脱离文档流导致布局混乱。
   • 调整图片的浮动属性，改用margin-left: auto实现靠右对齐，避免影响正常布局流。

修改后的完整代码 #

CSS代码

body {
  max-width: 1225px;
  width: 100%;
  margin: 0 auto;
  font-family: nyt-franklin, sans-serif;
  font-size: 14px;
  display: flex;
  justify-content: center;
  padding-top: 170px;
}

main {
  max-width: 1225px;
  width: 100%;
  margin: 0 auto;
}

#live-section {
  text-align: center;
  padding-top: 10px;
  font-size: 12px;
}

.live {
  color: firebrick;
  font-size: 12px;
  display: inline;
  padding-right: 15px;
}

.live_b {
  display: inline;
}

#vertical-line {
  border-right: 1px solid darkgray;
}

.two_column {
  display: grid;
  grid-template-columns: 69% 1px 29%;
  column-gap: 15px;
}

.main_column {
  display: flex;
  flex-direction: column;
  border-top: 1.5px solid black;
}

a .article_title:hover {
  color: #585858;
}

#live_c {
  padding: 10px 0 0 0;
}

.article_title {
  font-size: 1.375rem;
  font-weight: 700;
  margin: 5px 0;
}

.article_description {
  color: #5A5A5A;
  font-size: 0.875rem;
  padding: 0;
}

.updates {
  background-color: black;
  color: white;
  font-size: 12px;
  font-weight: bold;
  border-radius: 10px;
  display: inline-block;
  padding: 2px 6px;
  margin-left: 10px;
}

.article {
  display: block;
}

.part {
  min-height: 100%;
  border-bottom: 1.5px solid black;
  padding-bottom: 20px;
}

.content {
  max-width: 70%;
  padding-bottom: 10px;
  border-bottom: 1.5px solid lightgray;
}

.plus {
  display: inline;
  font-size: 12px;
}

.sliding_image {
  margin-top: 20px;
}

.sliding_image img {
  max-width: 525px;
  max-height: 350px;
  width: 100%;
  height: auto;
  margin-left: auto;
  display: block;
}

HTML代码

<!DOCTYPE html>
<html lang="it-en">

<!-- data corrente, lente di ingrandimento, sliding window -->

<head>
  <title>Elaborato PPM Federico Monetti</title>
  <link rel="stylesheet" href="style.css">

</head>

<body>
  <main>
    <div>
      <section id="live-section">
        <p class="live"><b>LIVE</b></p>
        <p class="live_b"><b>Lorem ipsum dolor</b></p>
        <p class="live">xm ago</p>
        <p class="live_b"><b>Lorem ipsum dolor sit</b></p>
        <p class="live">xm ago</p>
      </section>
    </div>
    <br>
    <div class="two_column">
      <!-- 左侧内容列 -->
      <div class="main_column" id="first_column">
        <div class="part">
          <div class="articles_list">
            <a href="">
              <section class="article">
                <div id="live_c">
                  <span class="live"><b>LIVE</b></span>
                  <span class="live">xm ago</span>
                </div>
                <div class="content">
                  <p class="article_title">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
                  <p class="article_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut maximus urna. Etiam lacus dui, commodo vitae tempus quis, ornare pellentesque eros. Duis eget lectus</p>
                  <p class="plus">See new updates</p><button class="updates">x+</button>
                </div>
              </section>
            </a>
          </div>
          <div>
            <section id="slide">
              <a href="">
                <div class="sliding_image">
                  <img src="img/placeholder.png">
                </div>
              </a>
            </section>
          </div>
        </div>
      </div>
      <!-- 中间竖线列 -->
      <div id="vertical-line"></div>
      <!-- 右侧内容列 -->
      <div class="main_column" id="second_column">
        <p>aaaaaa</p>
      </div>
    </div>
  </main>
</body>

</html>

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