元素脫離垂直對齊

Question

出現布局問題。 我正在為該項目使用Bootstrap，但沒有用於卡片。

該項目位於此處： http : //marcmurray.net/jay_test/#

網格布局中的元素大小均設置為相同的高度，但未在同一基線上對齊。 兩行的紙牌似乎比1行的紙更高對齊，但就我一生而言，我似乎無法弄清楚為什么。 由於卡是動態生成的，因此不確定是否可以鏈接到Codepen，但是與它們相關的CSS在這里：

.mix {
  width: 30%;
  padding-top: 0.1em;
  padding-bottom: 0.1em;
  padding-left: 1em;
  padding-right: 1em;
  box-shadow: 2px 2px 2px #ddd;
  display: inline-block;
  margin-left: 1em;
}


 .item {
  text-align: center;
  background-color: #fff;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin-top: 30px;
  line-height: 1.5em;
  position: relative;
}


.item-bottom {
  background-color: #f8f6f5;
  width: 100%;
  -webkit-transition: all .25s;
  -moz-transition: all .25s;
  -ms-transition: all .25s;
  -o-transition: all .25s;
  transition: all .25s;
  background-color: #F8F6F5;
  height: 2em;
  position: absolute;
  bottom: 0px;
  left: 0;
}

有人有想法么？

Answer 1

我打開了您的網站，打開了開發人員工具並刪除了dispaly: inline-block; 從元素開始，並且排列整齊。

這些可能不應該是內聯塊。 它們顯然是塊級元素。

所以：讓他們：

display: block;
float: left;

他們出現並正確坐着。

注意：您必須在實際的卡上刪除內聯塊的硬編碼樣式，否則它將覆蓋您所獲得的內容。