html - 使用 CSS 的 Bootstrap 3 Grid 中的垂直 DIV 对齐

Question

我正在使用 bootstrap 3，当我想垂直对齐两个 div 时遇到问题，例如 ( http://jsfiddle.net/Xelnag/335nhneq/ )

<div class="row">
    <div class="col-sm-6 vbox">
        <img src="img/1.png" class="icon-16"/> 
        <img src="img/2.png" class="icon-16"/>
    </div>
    <div class="col-sm-6">
        <img src="img/3.png" class="icon-32"/> 
        <img src="img/4.png" class="icon-32"/> 
        <img src="img/5.png" class="icon-32"/>
    </div>
</div>

“vbox”的 CSS 只是垂直对齐:

.vbox { vertical-align: bottom; }

我希望看到的是左 div 与底部对齐以匹配右侧。

我已经在 stackoverflow 中看到了使用 javascript 的答案，但到目前为止，我还没有发现仅使用 CSS 和 bootstrap 3 响应式设计的答案。

Answer 1

我找到了最好的方法。您需要遵循以下代码。

看看这个 fiddle :http://jsfiddle.net/harnishdesign/335nhneq/2/

HTML

<div class="row">
   <div class="table-container">
        <div class="col-xs-6 vbox" style="border:1px solid #000">
            <img src="img/1.png" class="icon-16"/> 
            <img src="img/2.png" class="icon-16"/>
        </div>
        <div class="col-xs-6 vbox" style="border:1px solid #F00">
            <img src="img/3.png" class="icon-32"/> 
            <img src="img/4.png" class="icon-32"/> 
            <img src="img/5.png" class="icon-32"/>
        </div>
    </div>
    </div>

CSS

.table-container .vbox {display: table-cell;
    float: none;
    vertical-align: bottom;
}
.table-container {
    display: table;
    table-layout: fixed;
    width: 100%;
}
.icon-16
{
    width: 16px;
    height: 16px;
}
.icon-32
{
    width: 32px;
    height: 32px;
}