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

2023年12月9日 189次阅读

形势与需要

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

问题：

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

修复了：

>不同的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>

我还在下面给出了一个codepen来重新创建问题,Ofcourse它是一个更简单的html和css,但问题仍然是相同的(虽然间隙可能不可见或在所有视口大小中都很大).请调整窗口大小,问题主要在小型移动视口中可见.

codepen link

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

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

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

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

最佳答案 正如你已经尝试了几个标记结构,我建议另一个,你放弃浮点数并使用普通的块元素与伪组合.

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

* {
  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>
点赞