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

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

解决:并排的两个div底部对齐_第1张图片

实现的代码如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Insert title heretitle>
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>hahadiv>
                    <div>hahadiv>
                    <div>hahadiv>
                div>
                <div id="t_3">
                    <div>hahadiv>
                    <div>hahadiv>
                    <div>hahadiv>
                    <div>hahadiv>
                    <div>hahadiv>
                    <div>hahadiv>
                div>
        div>
body>
html>

效果:

解决:并排的两个div底部对齐_第2张图片

你可能感兴趣的:(解决:并排的两个div底部对齐)