我希望在页面上画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>
效果: