使用'position:fixed'时无法对齐元素

当位置fixed时，我似乎找不到内联显示元素的方法。除固定定位外，所有其他位置都有效。有什么建议吗？

我目前有五个相等的矩形，它们应该在每个矩形旁边排列并填充整个视口。但是，当我使用固定定位时，它们都收敛到一个点。

我的代码如下：

.HTML

<span class="reveal"></span><span class="reveal1"></span><span class="reveal2"></span><span class="reveal3"></span><span class="reveal4"></span>

.CSS

.reveal {
    	width: 20%;
    	height: 100vh;
    	position: fixed;
    	display: inline-block;
    }
    
    .reveal1 {
    	width: 20%;
    	height: 100vh;
    	position: fixed;
    	display: inline-block;
    }
    
    .reveal2 {
    	width: 20%;
    	height: 100vh;
    	position: fixed;
    	display: inline-block;
    }
    
    .reveal3 {
    	width: 20%;
    	height: 100vh;
    	position: fixed;
    	display: inline-block;
    }
    
    .reveal4 {
    	width: 20%;
    	height: 100vh;
    	position: fixed;
    	display: inline-block;
    }

<html>
<header></header>
  <body>
    <span class ="reveal" > a</span > 
    <span class ="reveal1" > b</span > 
    <span class ="reveal2" > c</span > 
    <span class ="reveal3" > d</span > 
    <span class ="reveal4" > e</span >
  </body>
</html>

那是因为您已经为所有元素添加了position:fixed，并且当元素具有position of fixed时，默认情况下需要left and top as 0，即元素aligning，因此您可以尝试如下内容，或者按parent div wrap代码并将其position设置为fixed而不是所有元素。

位置：固定 - 不要为元素留出空间。相反，位置它位于相对于屏幕视口的指定位置，并且不滚动时移动它。

.reveal {
    width: 20%;
    height: 100vh;
    position: fixed;
    display: inline-block;
    background:#33f;
}
.reveal1 {
    width: 20%;
    height: 100vh;
    position: fixed;
    display: inline-block;
    background:#f2f;
    left:20%;
}
.reveal2 {
    width: 20%;
    height: 100vh;
    position: fixed;
    display: inline-block;
    background:#22f;
    left:40%;
}
.reveal3 {
    width: 20%;
    height: 100vh;
    position: fixed;
    display: inline-block;
    background:#f22;
    left:60%;
}
.reveal4 {
    width: 20%;
    height: 100vh;
    position: fixed;
    display: inline-block;
    background:#f2f;
    left:80%;
    }

<span class="reveal"></span><span class="reveal1"></span><span class="reveal2"></span><span class="reveal3"></span><span class="reveal4"></span>

或者通过将其包装到父div 中，如下所示，

#box{
  width:100vw;
  height:100vh;
  overflow:hidden;
  position:fixed;
  top:0;
  left:0;
}
.reveal {
    width: 20%;
    height: 100vh;
    display: inline-block;
    background:#33f;
}
.reveal1 {
    width: 20%;
    height: 100vh;
    display: inline-block;
    background:#f2f;
}
.reveal2 {
    width: 20%;
    height: 100vh;
    display: inline-block;
    background:#22f;
}
.reveal3 {
    width: 20%;
    height: 100vh;
    display: inline-block;
    background:#f22;
}
.reveal4 {
    width: 20%;
    height: 100vh;
    display: inline-block;
    background:#f2f;
    }

<div id="box">
<span class="reveal"></span><span class="reveal1"></span><span class="reveal2"></span><span class="reveal3"></span><span class="reveal4"></span>
</div>

由于您使用的是固定位置，因此您必须为每个块提供左位置。请在下面找到更新的代码，我添加了一些背景颜色来帮助区分。下面的 CSS ：

.reveal {
    width: 20%;
    height: 100vh;
    position: fixed;
    display: inline-block;
    background: red;
    left: 0;
}
.reveal1 {
    width: 20%;
    height: 100vh;
    position: fixed;
    display: inline-block;
    background: blue;
    left: 20%;
}
.reveal2 {
    width: 20%;
    height: 100vh;
    position: fixed;
    display: inline-block;
    background: green;
    left: 40%;
}
.reveal3 {
    width: 20%;
    height: 100vh;
    position: fixed;
    display: inline-block;
    background: orange;
    left: 60%;
}
.reveal4 {
    width: 20%;
    height: 100vh;
    position: fixed;
    display: inline-block;
    background: yellow;
    left: 80%;
}

请让我知道这是否有效。一方面，为什么你首先要固定定位？

希望这有帮助。

只需将所有内容包装在新的div 中并固定该位置即可。

.fixed {
  position: fixed;
  width: 100%;
}
span {
  background: red;
}
.reveal {
  width: 20%;
  height: 100vh;
  display: inline-block;
}
.reveal1 {
  width: 20%;
  height: 100vh;
  display: inline-block;
}
.reveal2 {
  width: 20%;
  height: 100vh;
  display: inline-block;
}
.reveal3 {
  width: 20%;
  height: 100vh;
  display: inline-block;
}
.reveal4 {
  width: 20%;
  height: 100vh;
  display: inline-block;
}

<div class="fixed">
  <span class="reveal"></span><span class="reveal1"></span><span class="reveal2"></span><span class="reveal3"></span><span class="reveal4"></span>
</div>

它不是显示：块，它是位置：固定使div相对于浏览器窗口拉伸，

只需添加另一个类，并在它们之间拆分CSS中的矛盾

<div class="one"><span class="reveal"></span></div>
<style>
.reveal {
    width: 20%;
    height: 100vh;
    display: inline-block;
}
.one
{
position: fixed;
}
</style>

尝试上面的代码

.HTML

.CSS

相关内容

最新更新

热门标签：