html - 框(div)的位置低于第一个框？

我正在尝试使用CSS制作放置在同一行中的不同框。

但是，如果没有任何样式规则（至少我注意到），则第二个框将低于第一个框。这是为什么？我该如何解决？

如果您有任何疑问，请随时提出，我将尽力回答。

先感谢您。

下面的代码段。
JSFiddle

.index-links {
  width: 90%;
  position: relative;
  left: 5%;
  padding: 1%;
}
.index-link {
  display: table-cell;
  height: 150px;
  width: 150px;
  border: 2px solid black;
  margin: 1%;
  padding: 0.5%;
  text-align: center;
  vertical-align: middle;
  position: relative;
  cursor: pointer;
  float: left;
}
.index-link > .index-link-perms::before {
  content: " | "
}

<div class="index-links">
  <br>
  <div class="index-link" data-color="black" data-x-index="1" data-y-index="1">Link 1<span class="index-link-perms">Access: Everyone</span>
  </div>
  <br>
  <div class="index-link" data-color="pink" data-x-index="2" data-y-index="1">Link 2<span class="index-link-perms">Access: SM</span>
  </div>
</div>

最佳答案

删除div之间的br标签。

<div class="index-links">
  <br>
  <div class="index-link" data-color="black" data-x-index="1" data-y-index="1">Link 1<span class="index-link-perms">Access: Everyone</span>
  </div>
  <div class="index-link" data-color="pink" data-x-index="2" data-y-index="1">Link 2<span class="index-link-perms">Access: SM</span>
  </div>
</div>

关于html - 框(div)的位置低于第一个框？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36954363/