Question

给出以下用于创建响应方块网格的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未得到遵守。孩子似乎延长了父母的高度，并将元素推到其父母下方。

我很确定这是因为我使用填充底部/百分比黑客来实现灵活的方块，因为在使用固定高度时一切都按预期工作。

有解决方法吗？我应该使用不同的技术吗？

Fiddle

Answer 1

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

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

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

至于这是否是一个好主意......可能不是，现在的Flexbox在现代浏览器中得到了很好的支持

Answer 2

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

使用百分比高度黑客时忽略溢出值

2 个答案: