时间戳

首页 > 解决方案 > height 属性没有平等地应用于所有具有相同高度的 div

html - height 属性没有平等地应用于所有具有相同高度的 div

问题描述

我在设计的网页中遇到了一个非常奇怪的问题。它是纯 HTML 和 CSS，我试图在每个锚元素的底部创建一个动画。因为我使用的是网格系统，所以所有的宽度都是 25%，但是锚元素下方的线条显示出一种奇怪的行为，其中一些线条的高度比其他线条小，即使我给所有线条都赋予了相同的高度锚元素。当给 before 元素时，假设 3px 的固定高度可以很好地工作。这是造成这种情况的 5% 值，我不知道为什么。

a 元素发生的情况的屏幕截图

.three-columns
{
    width: 25%;
}
a.listings
{

  font-family: "Consolas", 'Roboto', 'Open Sans', sans-serif;
  text-decoration: none;
  display: inline-block;
  height: 100%;
  padding: 2.5%;
  margin-bottom: 5%;
  transition: color 0.5s 0s;
  position: relative;
}

a.listings::before
{
  content: '';
  position: absolute;
  background: green;
  height: 5%;
  bottom: 0;
  left: 0;
  right: 100%;
  -webkit-transition: right 0.5s;
  transition: right 0.5s;
}

a.listings:hover::before
{
  right: 0;
}

三列是包含列表类的a元素的div

<div class="three-columns">
    <a class="listings" href="#">dd</a>
</div>

此外，当我在 Chrome 中检查我的代码并将大小设置为 1366 x 768（这也是我的笔记本电脑屏幕的大小）时，它看起来还不错。一旦我关闭检查器并恢复到实际大小，它就会开始表现，如我附上的屏幕截图所示。
编辑：好的，不，即使检查员现在也表现出同样的行为

标签： htmlcsscss-transitionscss-animations

解决方案

推荐阅读