Question

有布局问题。我在这个项目中使用Bootstrap而不是卡片。

该项目可在此处获得： http://marcmurray.net/jay_test/#

网格布局中的元素都被调整为相同的高度，但没有在同一基线上排列。有两条线的牌似乎比一条牌更高，但对于我的生活，我似乎无法找出原因。不确定我是否可以链接到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;

他们出现并坐好。

注意：您必须删除实际卡片上的内联块的硬编码样式，否则它将覆盖您所拥有的内容。

元素移出垂直对齐

1 个答案: