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>

CSS＆＃34; vbox＆＃34;只是一个垂直对齐：

.vbox { vertical-align: bottom; }

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

我已经在使用javascript的stackoverflow中看到了答案，但到目前为止，我发现没有一个可以与CSS一起使用bootstrap 3响应式设计。

Answer 1

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

看看这个小提琴：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;
}

使用CSS在Bootstrap 3 Grid中进行垂直DIV对齐

1 个答案: