我希望在页面上画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. 用 Android-X86 和 VirtualBox 玩安卓游戏

    目前的系统是 Ubuntu 14.04,近日玩了玩 flash 版的<皇家禁卫军:前线>塔防游戏,还是想试试原生安卓游戏的表现.发现大概有两个选择: 各类安卓模拟器:官方SDK模拟器,bl ...

  2. Javascript使用function创建类的两种方法

    1.使用function类 //myFunction.js var CMyFunc=function() { //类的公共方法,供外部调用 this.Func1=function() { var i= ...

  3. 缓存应用--Memcached分布式缓存简介

    一.   什么是Memcached Memcached 是一个高性能的分布式内存 对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象 来减少读取数据库的次数,从而提供动态. ...

  4. C++ Tempatet之模板模型

    模板一共有三种类型: 1.第一种包含模型:包含模型是讲模板的定义和声明都放在头文件里(注:一般我们写的代码是将声明放在头文件里,实现放在cpp里,防止产生两份实现代码) 缺点:包含模型会增加代码的量. ...

  5. matrix_last_acm_3

    the first CCPC   password 123 A http://acm.hust.edu.cn/vjudge/contest/view.action?cid=97380#problem/ ...

  6. nodeJs 初探 ~

    今天晚上,开始时间了一下nodejs,跟着 Node入门 一步步的往下走.对node开发也有了初步的了解. 期间没有碰到什么问题,只有在最后的时候,碰到了几个问题.在这里记录一下: 1 . cross ...

  7. 使用微信JSSDK自定义分享内容

    微信在6.0.2.58版本以后开始使用新的api,在Android系统中不能用以前的代码来自定义分享内容了. 现在自定义内容的方法走的是公众号的一套流程 1获取access_token 2得到toke ...

  8. 引擎设计跟踪(九.14.2e) DelayLoaded DLLs (/DELAYLOAD)

    关于DLL的delay load: http://msdn.microsoft.com/en-us/library/151kt790.aspx 最近在做GLES的shader compiler, 把现 ...

  9. remoting技术

    转: http://www.cnblogs.com/rickie/category/5082.html

  10. 理解Linux系统负荷[转]

    一.查看系统负荷 在Linux系统中,我们一般使用uptime命令查看(w命令和top命令也行).(另外,它们在苹果公司的Mac电脑上也适用.)   二.一个类比 我们不妨把这个CPU想象成一座大桥, ...