解决:并排的两个div底部对齐

我希望在页面上画2个栈,并列起来,并且其内容是动态的,高度、宽度都可变,但是要保持底部对齐,如图:

实现的代码如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Insert title here</title>
</head>
<style type="text/css">
    #t_1{
            position: relative;
    }
    #t_2{
            display: inline-block;
            background-color: red;
            bottom: 0;
    }
    #t_3{
            display: inline-block;
            background-color: red;
            right: 0;
            bottom: 0;
    }
</style>

<body>
        <div id="t_1">
                <div id="t_2">
                    <div>haha</div>
                    <div>haha</div>
                    <div>haha</div>
                </div>
                <div id="t_3">
                    <div>haha</div>
                    <div>haha</div>
                    <div>haha</div>
                    <div>haha</div>
                    <div>haha</div>
                    <div>haha</div>
                </div>
        </div>
</body>
</html>

效果:

原文地址:https://www.cnblogs.com/qrlozte/p/3641385.html