自舉流體布局問題中的底部對齊網格元素

Question

我在一個線程中找到了一種在bootstrap中使網格元素底部對齊的方法：

如何在自舉流體布局中底部對齊網格元素

最后一個家伙說我可以這樣做，並鏈接到一個小提琴

鏈接到小提琴： http : //jsfiddle.net/silb3r/0srp42pb/11/

我試過了，但是我找不到我做錯了什么，這里是我的代碼：

HTML：

<div class="row rowMidle">
    <div class="col-md-3">
        <div id="leftTown"><img src="images/TownLeft.png" height="100%" width="100%"></div>
    </div>
    <div class="col-md-1">
        <div id="char1"><img src="images/char1.png" height="100%" width="100%"></div>
    </div>
    <div class="col-md-1">
        <div id="char2"><img src="images/char2.png" height="70%" width="70%"></div>
    </div>
    <div class="col-md-1">
        <div id="char3"> <img src="images/char3.png" height="80%" width="80%"></div>
    </div>
    <div class="col-md-3">
        <div id="paneau"><img src="images/EditGetElement.png" height="100%" width="100%"></div>
    </div>
    <div class="col-md-3">
        <div id="leftTown"><img src="images/towright.png" height="100%" width="100%"></div>
    </div>


</div>

CSS：

.rowMidle > * {
    float: none;
    display: inline-block;
}
.rowMidle > *:last-child {
    vertical-align: bottom;
}

在這里您可以在線檢查它，自己查看問題： http : //goldiman.alwaysdata.net/

謝謝問候戈爾德曼

Answer 1

試試這個CSS：

.row.rowMidle {
  margin-top: 500px;
}

.row.rowMidle > div > div {
  vertical-align: bottom;
  position: absolute;
  bottom: 0;
}

刪除float:none; 來自.rowMidle > *