解决：并排的两个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>

效果：

posted @ 2014-04-02 19:28  rldts  阅读(4412)  评论(0)  编辑  收藏  举报