CSS实现带竖线分隔的响应式并排Div布局问题求助

问题描述 #

我正在制作一个包含竖线分隔的并排Div列表的网站（参考竖线居中、左右文本分布的时间轴样式）。尝试用百分比设置实现响应式时，浏览器缩放后，承载文本的Div会下移错位重叠，竖线分隔效果失效，请问如何确保Div始终分隔且保持响应式？

原代码 #

HTML

<div id="experience">
  <h3 class="center_text"> Experience</h3>
  <div>
    <hr class="vline" />
    <div id="exp1">
      <span class="circle"></span>
      <div class="exp_text">
        <div class="left_exp">
          <div class="date">
            <p>2022 </p>
          </div>
          <div class="role">
            <p>Software Engineering Intern</p>
          </div>
        </div>
        <div class="right_exp">
          <div class="company">
            <p>Company Name</p>
          </div>
          <div class="job_descr">
            <p>Description.................</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

#experience {
  border: 1px solid red;
  padding-top: 0px;
  margin-top: 0px;
  min-height: 1000px;
}

.center_text {
  border: 1px solid black;
  padding-top: 1%;
  text-align: center;
  color: #001418;
  font-weight: 600;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 2em;
}

.vline {
  height: 740px;
  width: 1px;
  border: none;
  border-right: solid 1px black;
  z-index: 10;
}

.circle2 {
  border: 50px solid black;
  width: 1px;
  border: none;
  border-right: solid 1px black;
  z-index: 10;
}

#exp1 {
  border: 1px solid blue;
  font-family: 'Josefin Sans', sans-serif;
  color: #182153;
  margin-top: -43%;
  height: 150px;
}

.circle:before {
  content: ' \25CF';
  font-size: 20px;
  margin-left: 49.69%;
}

.exp_text {
  display: flex;
  flex-grow: 1;
  flex-wrap: wrap;
  margin: 0 auto;
  border: 1px solid red;
  margin-top: -2%;
  min-height: 110px;
}

.left_exp {
  border: 1px solid green;
  text-align: right;
  margin-left: 25%;
}

.right_exp {
  margin-top: -5.8%;
  border: 1px solid green;
  width: min-content;
  margin-left: 60%;
}

.date {
  font-size: 1.3em;
  font-weight: 600;
}

.company {
  font-size: 1.3em;
  font-weight: 600;
}

.role {
  font-size: 1em;
  min-width: 250px;
}

.job_descr {
  font-size: 1em;
  min-width: 250px;
}

解决方案 #

原代码依赖固定百分比负margin和硬编码定位，缩放时布局逻辑容易断裂。改用Flexbox布局+绝对定位竖线的方案，能确保竖线始终居中，左右文本区块自适应空间，避免错位。

修改后的完整代码 #

HTML

<div id="experience">
  <h3 class="center_text">Experience</h3>
  <!-- 竖线容器 -->
  <div class="timeline-line"></div>
  <!-- 经验项1 -->
  <div class="experience-item">
    <div class="timeline-dot"></div>
    <div class="experience-content">
      <div class="left-exp">
        <div class="date">2022</div>
        <div class="role">Software Engineering Intern</div>
      </div>
      <div class="right-exp">
        <div class="company">Company Name</div>
        <div class="job-descr">Description.................</div>
      </div>
    </div>
  </div>
  <!-- 可添加更多经验项 -->
  <div class="experience-item">
    <div class="timeline-dot"></div>
    <div class="experience-content">
      <div class="left-exp">
        <div class="date">2023</div>
        <div class="role">Full Stack Developer</div>
      </div>
      <div class="right-exp">
        <div class="company">Another Company</div>
        <div class="job-descr">Another description here...</div>
      </div>
    </div>
  </div>
</div>

CSS

#experience {
  position: relative; /* 为竖线绝对定位提供基准 */
  border: 1px solid red;
  padding: 2rem 0;
  min-height: 1000px;
  max-width: 1200px;
  margin: 0 auto;
}

.center_text {
  border: 1px solid black;
  padding: 1rem 0;
  text-align: center;
  color: #001418;
  font-weight: 600;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 2em;
  margin-bottom: 2rem;
}

/* 居中竖线 */
.timeline-line {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 8rem;
  bottom: 2rem;
  width: 1px;
  background-color: black;
  z-index: 1;
}

/* 经验项容器 */
.experience-item {
  position: relative;
  margin-bottom: 3rem;
  z-index: 2;
}

/* 时间轴圆点 */
.timeline-dot {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: black;
  top: 0.5rem;
}

/* 左右内容容器 */
.experience-content {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
}

.left-exp {
  width: 45%;
  text-align: right;
  border: 1px solid green;
  padding-right: 1rem;
}

.right-exp {
  width: 45%;
  border: 1px solid green;
  padding-left: 1rem;
}

.date, .company {
  font-size: 1.3em;
  font-weight: 600;
  font-family: 'Josefin Sans', sans-serif;
  color: #182153;
}

.role, .job-descr {
  font-size: 1em;
  font-family: 'Josefin Sans', sans-serif;
  color: #182153;
}

/* 响应式适配：小屏幕下切换为上下布局 */
@media (max-width: 768px) {
  .timeline-line {
    left: 2rem;
    top: 0;
  }
  
  .timeline-dot {
    left: 2rem;
    transform: translateX(-50%);
  }
  
  .experience-content {
    flex-direction: column;
    margin-left: 4rem;
  }
  
  .left-exp, .right-exp {
    width: 100%;
    text-align: left;
    padding: 0;
  }
}

关键优化点 #

• 用position: relative给父容器设置基准，竖线通过left:50% + transform: translateX(-50%)实现精准居中，缩放时不会偏移
• 经验项用Flex布局，左右区块各占45%宽度，自动适配容器空间，避免硬编码百分比导致的错位
• 时间圆点绝对定位在竖线上，与文本区块解耦，不会随文本移动
• 添加媒体查询，小屏幕下自动切换为左侧竖线+上下文本的布局，保证移动端体验

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