html - 如何在具有六个框的网格布局中的容器旁边放置多个图标？

Question

我有一个三列两行的网格布局，总共有六个容器，分两行，每行三个盒子。我想在每个框旁边的框外放置图标，与标题内联。

我有一个用于网格的 div 部分，它是 class= "row"和一个用于列的 div。我尝试为行 div 中但在每个列 div 之前的图标创建一个类。不幸的是，图标没有出现在相应的框外，而是出现在右上角

.column {
  float: left;
  width: 22%;
  margin-left: 115px;
  letter-spacing: 3px;
  color: black;
  height: 270px;
  margin-top: 20px;
  border: 1px solid green;
}

.row.i:before {
  content: "";
  display: inline-block;
  clear: both;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<section class="section section-dark">

  <div class="row"><i class="fa fa-home"></i>
    <div class="column"><i class="fal fa-address-card"></i>
      <div class="column"><i class="fas fa-alarm-snooze "></i>
        <div class="column "><i class="fad fa-alicorn"></i>
          <div class="column">
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

如上所述，结果令人失望，除了图标出现在右上角之外，没有发生太多事情。

Answer 1

您需要仔细检查您的 HTML。您的许多 div 都处于打开状态，并且一个图标位于您的列之外，因此更难定位。

但是，要解决它，请为您的 i 图标添加间距。像这样:

i {
    left: -30px;
    position: relative;
}

这会将图标移动到所需位置。我想。

.column {
  float: left;
  width: 22%;
  margin-left: 115px;
  letter-spacing: 3px;
  color: black;
  height: 270px;
  margin-top: 20px;
  border: 1px solid green;
}

i {
  left: -30px;
    position: relative;
}
.i:before {
  content: "";
  display: inline-block;
  clear: both;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<section class="section section-dark">
  <div class="row">
    <div class="column"><i class="fa fa-home"></i></div>
    <div class="column"><i class="fal fa-address-card"></i></div>
    <div class="column"><i class="fas fa-alarm-snooze "></i></div>
    <div class="column "><i class="fad fa-alicorn"></i></div>
  </div>
</section>