Bootstrap 3 - 如何将图像垂直对齐到最高列的底部?

时间:2015-03-08 15:07:15

标签: css3 twitter-bootstrap

这里是the fiddle

我不能失去响应功能,因为我的问题会更深入。

如果有疑问,请不要犹豫。提前谢谢。

<div class="container">
    <div class="row">
        <div class="col-md-6 yellow">
            <div class="col-md-10">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et efficitur ipsum. Fusce accumsan congue diam, et bibendum mauris aliquam</p>
                <img class="col-md-12" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTfVm23Mm3GiIQJJnnej43NG1JrrvpFVTqx1QaOGHXFneJPr9ow" />
            </div>
        </div>
        <div class="col-md-6 orange">
            <div class="col-md-8">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et efficitur ipsum. Fusce accumsan congue diam, et bibendum mauris aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et efficitur ipsum. Fusce accumsan congue diam, et bibendum mauris aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et efficitur ipsum. Fusce accumsan congue diam, et bibendum mauris aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et efficitur ipsum. Fusce accumsan congue diam, et bibendum mauris aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et efficitur ipsum. Fusce accumsan congue diam, et bibendum mauris aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et efficitur ipsum. Fusce accumsan congue diam, et bibendum mauris aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et efficitur ipsum. Fusce accumsan congue diam, et bibendum mauris aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et efficitur ipsum. Fusce accumsan congue diam, et bibendum mauris aliquam.</p>
            </div>
        </div>
    </div>
</div>

1 个答案:

答案 0 :(得分:0)

你的问题是令人困惑的,因为你有img包含在html中,但如果我正确理解它你将需要考虑使用javascript / jquery来计算每个容器的高度然后比较它们然后根据哪个一个更大,将img插入其中。下面是一些让你入门的jquery。

$(document).ready(function() {
    var a = $('.yellow').height();
    var b = $('.orange').height();    

    if(a > b){
       //do something here
    }
    else {
        //do something else here
    }
});