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

效果：

解决：并排的两个div底部对齐的更多相关文章

  1. 并排的两个div之间会有空隙

    两个并排的DIV会有如下图所示的空隙 是因为 代码中 两个DIV之前有个 ’回车‘ 这么写就OK了 可是为什么会有这种问题呢,是因为浏览器将 空格.回车.tab键等字符都当做一个空格处理,所以当你回车 ...

  2. 两个div并列居中显示——当display:inline-block;时，两个div无法对齐即一高一矮

    解决办法: 给div添加样式vertical-align: top;

  3. DIV相对于父DIV底部对齐的实现方法

    代码如下 <style type="text/css"> .box1 {border:1px #cccccc solid; width:500px; height:60 ...

  4. CSS布局之div交叉排布与底部对齐--flex实现

    最近在用wordpress写页面时,设计师给出了一种网页排布图样,之前从未遇到过,其在电脑上(分辨率大于768px)的效果图如下: 而在手机(分辨率小于等于768px)上要求这样排列: 我想到了两种方 ...

  5. 两个div并排显示，当浏览器界面缩小时会出现换行

    解决:规定两个子div的父div的宽 <div id="showDataDiv" style="width: 1000px"> <div st ...

  6. 一个div居于另一个div底部

    一个div如何与另一个div底部对齐,方法有很多,比如使用绝对定位 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/ ...

  7. DIV+CSS布局问题：一个宽度不确定的DIV里面放三个水平对齐的DIV，左右两个DIV宽度固定为150px，中间那个DIV充满剩余的宽度

    一个入门的DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度. 说明:代码非真实情况下使用,所以直接简单. 没耐 ...

  8. NO.14 两个div并排，左边为绝对宽度，右边为相对宽度

    两个div并排,左边为绝对宽度,右边为相对宽度,这个问题,我也经常遇到,我一般的处理方法是将最大的容器padding-left固定宽度,左边的固定宽度的一块position:absolute,然后ri ...

  9. 让两个Div并排显示

    一.使用display的inline属性 <div style="width:300px; height:auto; float:left; display:inline"& ...

随机推荐

  1. 开发中可能会用到的几个 jQuery 小提示和技巧（转）

    今天,我们将分享一些很有用的技巧和窍门给 jQuery 开发人员.jQuery 是最好的 JavaScript 库之一,用于简化动画,事件处理,支持 Ajax 和 HTML 的客户端脚本.网络中有大量 ...

  2. iOS网络传输Delegate不被触发的本质原因

    NSURLSession一共有四种Delegate (文后附表有Session和SessionTask分类表格) NSURLSessionDelegate, NSURLSessionDownloadD ...

  3. python 字典列表排序operator.itemgetter()

    举例: import operator x = [{'name':'Homer', 'age':39}, {'name':'Bart', 'age':10}] sorted_x = sorted(x, ...

  4. HDU 5800 To My Girlfriend 背包

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5800 To My Girlfriend Time Limit: 2000/2000 MS (Java ...

  5. dp--poj1458最长公共子序列

    很水的一题 输入串a与串b: Dp[i][j]表示a串中1~i与b串中1~j的子串的最长公共子序列. Max{dp[i-1][j], dp[i][j-1]}       (a[i]!=b[j]) Dp ...

  6. 利用PE数据目录的导入表获取函数名及其地址

    PE文件是以64字节的DOS文件头开始的(IMAGE_DOS_HEADER),接着是一段小DOS程序,然后是248字节的 NT文件头(IMAGE_NT_HEADERS),NT的文件头位置由IMAGE_ ...

  7. atan atan2的区别！

    atan与atan2的使用=范围不一样! 今天调一一下午的BUG!终于发现了是ATAN的错! atan()函数: atan(y/x); 带一个参数!注意X不能为0,否则…………, 还有求出的角度为-p ...

  8. vs2010创建并使用DLL

    一.为什么需要dll 代码复用是提高软件开发 效率的重要途径.一般而言,只要某部分代码具有通用性,就可将它构造成相对独立的功能模块并在之后的项目中重复使用.比较常见的例子是各种应用程序框架, 如ATL ...

  9. Too many levels of symbolic links 问题

    Too many levels of symbolic links 问题 Posted on 2011-11-30 20:33 张贺 阅读(5826) 评论(0) 编辑 收藏 今天弄了个ZendStu ...

  10. ASP.NET 应用程序安全

    原文:http://msdn.microsoft.com/zh-cn/magazine/hh708755.aspx 一.跨站点脚本 简介 XSS 攻击是指将脚本恶意注入用户的浏览会话,这通常在用户不知 ...