如何解决浏览器缩放时CSS响应式线条溢出容器问题

要实现首尾对齐容器、中间等距的4条垂直线，且浏览器缩放时不溢出，只需调整线条的定位值并优化样式：

修改后的代码 #

CSS

.container {
  width: 100%;
  position: relative;
  display: flex;
  padding-right: 100px;
  box-sizing: border-box;
  min-height: 20px; /* 确保容器有基础高度 */
}

.inner-container {
  display: flex;
  flex: 1;
  position: relative;
}

.bar {
  flex-grow: .8;
  height: 20px;
  background-color: lightblue;
}

.blackline {
  width: 10px;
  height: 20px;
  background-color: black;
  position: absolute;
  z-index: 1;
  left: 100%; /* 用left代替margin-left，定位更准确 */
}

.line {
  width: 1px;
  height: 100%;
  position: absolute;
  background-color: #000;
  top: 0; /* 去掉margin-top，用top对齐容器顶部 */
}

.line1 {
  left: 0; /* 对齐容器左起点 */
}

.line2 {
  left: 33.333%; /* 1/3位置，等距分布 */
}

.line3 {
  left: 66.666%; /* 2/3位置，等距分布 */
}

.line4 {
  right: 0; /* 对齐容器右终点，避免溢出 */
}

HTML

<div class="container">
  <div class="line line1"></div>
  <div class="line line2"></div>
  <div class="line line3"></div>
  <div class="line line4"></div>
  <div class="inner-container">
    <div class="bar"></div>
    <div class="blackline"></div>
  </div>
</div>

关键修改说明 #

• 等距定位：4条线将容器宽度分为3个等份区间，中间两条线设置为33.333%和66.666%，确保间距完全相等。
• 避免溢出：最后一条线用right: 0代替固定百分比，直接对齐容器右边缘，无论容器如何缩放都不会超出边界。
• 样式优化：去掉margin-top改用top: 0让线条和容器顶部对齐；给container加min-height确保线条有显示高度；将blackline的margin-left: 100%改为left: 100%，定位更稳定。

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