Question

我想使用网格系统来显示许多图标。我是从博客中学到的，并将代码放在JSFiddle中。我已经使网格系统响应JSFiddle示例，但我不理解两件事。

首先，如果我将：before伪元素的填充顶部设置为120％或60％，则高度会发生变化，但由于在其他任何地方都没有指定高度，这个高度的函数是多少？它与字体大小或其他东西有关吗？它似乎与屏幕尺寸不成比例。

此外，如果我从CSS中删除margin-bottom : 2%选择器，整个网格系统将失去它的比例，并且容器的高度变得更大且不稳定。这是为什么？

HTML

<div class="container">
<div class="icons"></div>
<div class="icons"></div>
<div class="icons"></div>
<div class="icons"></div>
<div class="icons"></div>
<div class="icons"></div>
<div class="icons"></div>

<div class="gap"></div>
<div class="gap"></div>
</div>

和CSS

.container
{
    text-align : justify ;
    font-size : 0 ;
    background-color : #C0C0C0 ;
    padding : 2% 2% 0
}

.container:after
{
  content : '' ;
  display : inline-block ;
  width : 100%
}

.icons
{
  display : inline-block ;
  text-align : center ;
  margin-bottom : 2% ; 
  width : 49% ;
  background-color : blue 
}

.icons:before
{
  content : '' ;
  display : inline-block ;
  padding-top : 60%
}

.gap
{
  display : inline-block ;
  width : 49%
}

Answer 1

保证金/填充百分比is calculated from the element width。
如果删除边距，高度不会改变。元素都在一起所以看起来很高。

使用：在psuedo元素之前在响应网格中创建Div高度

1 个答案: