浮动元素不会排列

Question

我希望每个元素的大小相同并正确对齐，但正如您所看到的，总周数较少的元素位于该空间的较低位置。

我可以添加幻像行，但我希望在css中进行此修正。我怎样才能做到这一点？

CSS

.miniMonth{
  position: relative;
  left: 0px;
  display: inline-block;
  padding: 30px;
  width: 340px;
  height: 327px;
  cursor: pointer;
  border: solid black 1px;
}
.contents {
  position: fixed;
  top: 50px;
  bottom: 50px;
  left: 0; 
  right: 0;
  overflow: auto;
  background-color: rgb(225, 225, 225);
}

HTML

<div class="contents">
  <div class="miniMonth">/* CALENDAR CONTENT*/</div>  
   ...
  <div class="miniMonth">/* CALENDAR CONTENT*/</div>
</div>

Answer 1

使用vertical-align: top。默认值为baseline，这就是为什么每个.miniMonth内容的所有底部都已对齐的原因。

.miniMonth {
  position: relative;
  display: inline-block;
  vertical-align: top;
  padding: 30px;
  width: 340px;
  height: 327px;
  cursor: pointer;
  border: solid black 1px;
  box-sizing: border-box;
}

Answer 2

您可以使用flexbox。设置父div显示：flex和Child（minimonths）到flex：1 1 auto;这将使它们在同一行中对齐，并且高度相同。