Question

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

然而，如果没有任何风格规则（至少我已经注意到）这样做，第二个框低于第一个框。这是为什么？我该如何解决？

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

提前谢谢。

下面的代码段。 JSFiddle

＆＃13;

.a

＆＃13;

.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: " | "
}

＆＃13;

Answer 1

删除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>

Answer 2

更改CSS如下

.index-links {
  display:flex;
  width: 90%;
  position: relative;
  left: 5%;
  padding: 1%;
}

Box（div）的位置低于第一个？

2 个答案: