我希望在页面上画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. ubuntu 下root用户无法访问声音设备的解决方案

    原因:root用户没有对pulsaudio的访问权限,而且pulsaudio默认是不能在root下自动启动解决办法: 一.修改自动启动:编辑 gedit /etc/default/pulseaudio ...

  2. 随笔 planetest

    Camera跟随物体: import Scripts包,Component中的camera control会有smooth follow脚本,添加到Main Camera中,在脚本的target属性中 ...

  3. 对中级Linux用户有用的20个命令

    1. 命令: Find 搜索指定目录下的文件,从开始于父目录,然后搜索子目录. 注意: -name‘选项是搜索大小写敏感.可以使用-iname‘选项,这样在搜索中可以忽略大小写.(*是通配符,可以搜索 ...

  4. python--参数列表的分拆

    当你要传递的参数已经是一个列表,调用的函数却接受分开一个个的参数,这个时候可以考虑参数列表拆分: 可以使用* 操作符来自动把参数列表拆开: args=[3,6] x=list(range(*args) ...

  5. 博文&零散信息阅读

    关于培养方案: 全国一线高校.网易云课堂和我院培养计划的区别主要体现在: 基础课上,我院删去了物理课程的必修要求. 专业课上,删去了汇编语言.编译原理.信息安全技术等学科的必修要求. 专业选修课上,我 ...

  6. [转]后缀自动机(SAM)

    原文地址:http://blog.sina.com.cn/s/blog_8fcd775901019mi4.html 感觉自己看这个终于觉得能看懂了!也能感受到后缀自动机究竟是一种怎样进行的数据结构了. ...

  7. cf 61E. Enemy is weak 树状数组求逆序数(WA) 分类： Brush Mode 2014-10-19 15:16 104人阅读 评论(0) 收藏

    #include <iostream> #include <algorithm> #include <cstdio> #include <cstring> ...

  8. AutoResetEvent 运用

    static AutoResetEvent are = new AutoResetEvent(true);//初始化为开 static void Main(string[] args) { //如果这 ...

  9. vector 的resize 和 reserve

    首先声明,都是转载的,理解知识为主要目的. http://www.cnblogs.com/zahxz/archive/2013/02/20/2918711.html C++内置的数组支持容器的机制,但 ...

  10. Linux内存分配----SLAB

    动态内存管理 内存管理的目标是提供一种方法,为实现各种目的而在各个用户之间实现内存共享.内存管理方法应该实现以下两个功能: 最小化管理内存所需的时间 最大化用于一般应用的可用内存(最小化管理开销) 内 ...