元素遷出垂直對齊

有一個佈局問題。我爲這個項目使用Bootstrap，但不是用於卡片。元素遷出垂直對齊

該項目可以在這裏找到： http://marcmurray.net/jay_test/#

在網格佈局中的元素全都大小相同的高度，但不排隊上相同的基線。 2行的卡片似乎比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; 
}

人有什麼想法？

來源

2015-05-11 ladanta

我打開你的網站，並開通開發工具和移除了元素dispaly: inline-block;，它很好地一字排開。

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

所以：讓他們：

display: block; 
float: left;

，他們出現了，坐好。

注意：你必須刪除inline-block的的硬編碼風格上的實際卡本身或者它會覆蓋你得到了什麼。

來源

2015-05-11 23:22:23

元素遷出垂直對齊

回答

相關問題