0

给定以下用于创建响应式正方形网格的 CSS 声明：

nav a {
  display: block;
  float: left;
  overflow: hidden;
  padding-bottom: 25%;
  width: 25%;
}

nav a p {
  display: none;
}

nav a:hover p {
  display: block;
}

overflow: hidden显示子元素时不被尊重。子元素似乎扩展了父元素的高度，并将其父元素下方的元素推到了原位。

我很确定这是使用我用来实现灵活正方形的 padding-bottom/percentage hack 的结果，因为在使用固定高度时一切都按预期工作。

有解决方法吗？我应该使用其他技术吗？

小提琴

4

2 回答 2

1

您是正确的，因为 padding-bottom 导致第五个元素不合适。当您将鼠标悬停在<a>上时，元素的高度会增加显示的高度，<p>然后在其顶部添加额外的 25% padding-bottom，从而导致您下方的元素向右移动。

为避免这种情况，我们可以绝对定位您的显示位置<p>，以便在添加底部填充时不计算其高度。

https://jsfiddle.net/2qaz1dLx/2/

至于这是否是一个好主意......可能不是，现在现代浏览器很好地支持 flexbox

于 2017-07-31T03:31:38.253 回答
1

添加position: absolute到nav a p班级

nav a p {
  position: absolute;
  display: none;
}


nav {
  display: block;
  width: 100%;
}

nav a {
  display: block;
  float: left;
  overflow: hidden;
  padding-bottom: 25%;
  width: 25%;
}

nav a p {
  position: absolute;
  display: none;
}

nav a:hover p {
  display: block;
}
<nav>
  <a>
    one
    <p>one child</p>
  </a>
  <a>
    two
    <p>two child</p>
  </a>
  <a>
    three
    <p>three child</p>
  </a>
  <a>
    four
    <p>four child</p>
  </a>
  <a>
    five
    <p>five child</p>
  </a>
</nav>

于 2017-07-31T03:35:07.950 回答