Question

给出了这个例子：

<span index="1" style="width: 100px; height: 100px;" class="_galery_plot"><i class="fa fa-camera-retro fa-2x"></i></span>
<span index="2" style="width: 100px; height: 100px;" class="_galery_plot"><i class="fa fa-camera-retro fa-4x"></i></span>
<span index="3" style="width: 100px; height: 100px;" class="_galery_plot"><i class="fa fa-camera-retro fa-1x"></i></span>
<span index="4" style="width: 100px; height: 100px;" class="_galery_plot"><i class="fa fa-camera-retro fa-4x"></i></span>
<span index="5" style="width: 100px; height: 100px;" class="_galery_plot"><i class="fa fa-camera-retro fa-1x"></i></span>
<span index="6" style="width: 100px; height: 100px;" class="_galery_plot"><i class="fa fa-camera-retro fa-2x"></i></span>
<span index="7" style="width: 100px; height: 100px;" class="_galery_plot"><i class="fa fa-camera-retro fa-1x"></i></span>
<span index="8" style="width: 100px; height: 100px;" class="_galery_plot"><i class="fa fa-camera-retro fa-1x"></i></span>
<span index="9" style="width: 100px; height: 100px;" class="_galery_plot"><i class="fa fa-camera-retro fa-4x"></i></span>
<span index="10" style="width: 100px; height: 100px;" class="_galery_plot"><i class="fa fa-camera-retro fa-3x"></i></span>

盒子不在同一条线上，为什么？

https://jsfiddle.net/n1sfbkva/

Answer 1

您可以通过在vertical-align: top; css规则中添加._galery_plot来解决此问题。或者，您可以使用line-height而非height - 此选项也会使您的图标与同一基线对齐。

以下是显示这两个选项的代码示例。

＆＃13;

span {
  display: inline-block;
  background-color: blue;
  text-align: center;
  cursor: pointer;
}
.option-1 > span {
  width: 100px;
  line-height: 100px;
}
.option-2 > span {
  width: 100px;
  height: 100px;
  vertical-align: top;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="option-1">
  <span><i class="fa fa-camera-retro fa-2x"></i></span>
  <span><i class="fa fa-camera-retro fa-4x"></i></span>
  <span><i class="fa fa-camera-retro fa-1x"></i></span>
</div>
<hr>
<div class="option-2">
  <span><i class="fa fa-camera-retro fa-2x"></i></span>
  <span><i class="fa fa-camera-retro fa-4x"></i></span>
  <span><i class="fa fa-camera-retro fa-1x"></i></span>
</div>

＆＃13;

跨越彼此不同大小的字体 - 令人敬畏的图标破坏了布局

1 个答案: