容器之间不同视口大小的不同大小的不明原因垂直间隙

Question

情况和需要

我有一个项目的情况，在网站上我需要做楼梯，那些楼梯上会有文字或内容，楼梯的背景需要是不透明的。并且每个阶梯的右侧还有1个元素（基本上是图像）。因此，我只是使用css将每个东西浮动到左边并提及宽度，以便一切都符合要求100％。

问题：

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

修复已尝试：

1. 不同的html： - 我之前尝试了不同的html布局，其中我将每个阶梯和图像包装在自己的包装中，然后将它们都浮在其中（当然没有用）

   我。在这个早期版本的html中，我尝试给它带有负边距（也转换为缩小到下一个并给底部值赋予伪元素）但它们相互加倍/重叠并变得更加可见（厚白色条带代替不透明的）

   II。在早期的html尝试在阶梯div内使用spacer div来填补空隙，但似乎在每个步骤中它以不同的间隙和不同的更厚/更薄的重叠白色条带显示

寻求答案：

我在这里经历了很多问题并修复了它们并没有任何帮助，也经历了其他可能造成这些问题的错误（尽管事实并非如此）。阅读许多文章并花费数小时来解决这个问题正在帮助解决这个问题。因此，如果您没有解决方案（或有任何时间找到解决方案），请Upvote

注意：

如果它是纯色的话，它本来是一个简单的修复，但它需要不透明才能在背景中显示。因此，对此无能为力。

如果我没有得到任何解决方案，我可能不得不变得僵硬，可能会进行一个更丑陋的修复（视觉上也是如此），我真的不希望这个项目。

链接和代码

*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>

我还制作了一个下面给出的编解码器来重新创建问题，Ofcourse它是一个更简单的html和css，但问题仍然是相同的（虽然间隙可能不可见或在所有视口大小中都很大）。请调整窗口大小，问题主要在小型移动视口中可见。

codepen link

重新创建的问题的屏幕截图：

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

Answer 1

由于您已经尝试了几种标记结构，我建议使用另一种标记结构，放弃dfList <- Map(prop_skew_calc, ctrls$samples, ctrls$ctrl) finaldf <- do.call(rbind, dfList) finaldf # samplemode cntrlmode Min. X1st.Qu. Median Mean X3rd.Qu. Max. skewmode prop # 1 17 17 13 14 15 14.90 17 17 -0.1615385 0.223684211 # 2 13 17 13 13 13 13.05 13 17 -0.3038462 0.001797484 # 3 15 13 14 14 15 14.67 15 17 0.1192857 1.000000000 # 4 14 13 13 14 14 14.31 15 17 0.1007692 0.995491187 并将普通块元素与伪组合使用。

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

＆＃13;

＆＃13;

float

＆＃13;

* {
  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%;
}

＆＃13;

＆＃13;

＆＃13;