html - 容器之间不同视口(viewport)大小的不同大小的无法解释的垂直间隙

Question

现状与需求

我在一个元素中遇到这样一种情况，我需要在网站中制作楼梯，这些楼梯中会有文本或内容，并且楼梯的背景需要是不透明的。每个阶梯的右侧还有一个元素(本质上是一个图像)。因此，我只是使用 css 将所有内容 float 到左侧并提及宽度，以便所有内容都根据需要 100% 适合。

问题:

每个阶梯下方都有明显的间隙，这在某些视口(viewport)中可见，并且在某些视口(viewport)尺寸中更大/更小。

已尝试修复:

1. 不同的 html:- 我之前尝试过不同的 html 布局，其中我只是将每个楼梯和图像包装在自己的包装器中，然后将它们都 float 在其中(当然没有用)

   我。在这个早期版本的 html 中，我试图给它负边距(也转换为缩小到下一个并给伪元素负底部值)但是它们加倍/相互重叠并且变得更加可见(而不是厚白色 strip 不透明的)

   二。在较早的 html 中，尝试在阶梯 div 内使用间隔 div 来填充间隙，但似乎在每个步骤中它都以不同的方式显示，具有不同的间隙和不同的更厚/更薄的重叠白色 strip

寻求答案:

我在这里解决了很多问题及其修复，但没有任何帮助，并且还解决了可能造成这些问题的其他错误(尽管事实并非如此)。阅读了许多文章并花了数小时来解决这个问题。没有什么可以帮助解决这个问题。因此，如果您对此没有解决方案(或有时间找到解决方案)，请投票

注意事项:

如果它是纯色会很容易解决，但它需要不透明才能透过背景显示。因此，我们对此无能为力。

如果我对此没有任何解决方案，我可能不得不变得僵化，并且可能会下降到一个更丑陋的修复(视觉上也是如此)，老实说，我不希望这个元素。

链接和代码

*CODE:*

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

.background{
  background:url("https://static.pexels.com/photos/2324/skyline-buildings-new-york-skyscrapers.jpg");
  background-size:cover;
/*   min-height:90vh; */
  width:90vw;
  margin:20px auto;
  padding:20px;
}

.square{
  height:100px;
  width:50%;
  float:left;
}

#square1,
#square3,
#square5,
#square7,
#square9{
  background:rgba(255,255,255,.7);
  
}
#square2,
#square4,
#square6,
#square8,
#square10{
  background:red;
  
}
#square1{
  width:20%;
}
#square2{
  width:80%;
}

#square3{
  width:27%;
}
#square4{
  width:73%;
}

#square5{
  width:34%;
}
#square6{
  width:66%;
}

#square7{
  width:41%;
}
#square8{
  width:59%;
}



/***********
				=clearfix
***********/


.clearfix:before,
.clearfix:after{
	display: table;
	content: ''; 

}
.clearfix:after{
	clear: both; 

}

<div class="background clearfix">
  <section class="square" id="square1"></section>
<section class="square" id="square2"></section>
<section class="square" id="square3"></section>
<section class="square" id="square4"></section>
<section class="square" id="square5"></section>
<section class="square" id="square6"></section>
<section class="square" id="square7"></section>
<section class="square" id="square8"></section>
<section class="square" id="square9"></section>
<section class="square" id="square10"></section>

</div>

我还制作了下面给出的 codepen 来重现问题，当然它是一个更简单的 html 和 css，但问题仍然是相同的(尽管间隙可能不可见或在所有视口(viewport)尺寸中都很大)。请调整窗口大小，该问题在小移动视口(viewport)中最明显。

codepen link

重现问题的屏幕截图:

由于一些人无法重现相同的故障/问题，因此请看下面的屏幕截图。请放大并注意楼梯台阶和红色 block 之间的垂直间隙，如上所述。

Answer 1

由于您已经尝试了几种标记结构，我建议您再使用另一种标记结构，您可以在其中删除 float 并结合使用普通 block 元素和伪元素。

这将使控制步骤变得更加容易。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.background {
  background: url("https://static.pexels.com/photos/2324/skyline-buildings-new-york-skyscrapers.jpg");
  background-size: cover;
  width: 90vw;
  margin: 20px auto;
  padding: 20px;
}

.square {
  position: relative;
  height: 60px;
  background: rgba(255, 255, 255, .7);
  counter-increment: stair;                  /*  "counter", just for demo purpose  */
}
.square::after {
  position: absolute;
  top: 0; right: 0;
  height: 100%;
  background: red;
}
.square:nth-child(1)::after {
  content: 'Text in stair ' counter(stair);  /*  "counter", just for demo purpose  */
  width: 80%;
}
.square:nth-child(2)::after {
  content: 'Text in stair ' counter(stair);  /*  "counter", just for demo purpose  */
  width: 70%;
}
.square:nth-child(3)::after {
  content: 'Text in stair ' counter(stair);  /*  "counter", just for demo purpose  */
  width: 60%;
}
.square:nth-child(4)::after {
  content: 'Text in stair ' counter(stair);  /*  "counter", just for demo purpose  */
  width: 50%;
}
.square:nth-child(5)::after {
  content: 'Text in stair ' counter(stair);  /*  "counter", just for demo purpose  */
  width: 40%;
}

<div class="background">
  <section class="square"></section>
  <section class="square"></section>
  <section class="square"></section>
  <section class="square"></section>
  <section class="square"></section>
</div>