我希望在页面上画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图片无缝轮播插件；

    图片轮播这种效果在web开发中看常见,网上的插件也有很多,最近在整理项目的过程中,把之前的图片轮播效果整合了一下,整理成一个可调用的插件以做记录,也方便更多前端爱好者来学习使用:图片的轮播原理很简单, ...

  2. android输入法中的imeoption

    SDK升级到1.5以后,当文本输入框(EditText及其子类)获得焦点后,会弹出系统自带的软键盘 为了实现一些自定义的功能,就稍微研究了下 * 当layout中有多个EditText,把每个控件的a ...

  3. poj 1985 Cow Marathon 树的直径

    题目链接:http://poj.org/problem?id=1985 After hearing about the epidemic of obesity in the USA, Farmer J ...

  4. 【BZOJ】【1045/1465】【HAOI2008】糖果传递

    思路题/神奇的转化…… orz hzwer 或许这个思路可以从单行而非环形的递推中找到?(单行的时候,从左往右直接递推即可…… 感觉好神奇>_<脑残患者想不出…… P.S.话说在$n\le ...

  5. ISIN编码

    国际证券识别编码(ISIN编码)是由国际标准化组织(ISO)制定的证券编码标准,并在<证券及相关金融工具-国际证券识别编码体系>(ISO6166)中正式发布.ISO6166主要规定了ISI ...

  6. 全7 天玩转 ASP.NET MVC — 第 2 天

    0. 前言 我相信在开始第 2 天的学习时,你已经顺利地完成了第 1 天的课程. 我们回顾一下第 1 天的主要关注点: 为什么选择 ASP.NET MVC ? ASP.NET Webforms 和 A ...

  7. 提高Python运行效率的六个窍门

    曾灵敏 - MAY 18, 2015 Python是一门优秀的语言,它能让你在短时间内通过极少量代码就能完成许多操作.不仅如此,它还轻松支持多任务处理,比如多进程. 不喜欢Python的人经常会吐嘈P ...

  8. HDU 3642 Get The Treasury (线段树扫描线，求体积并)

    参考链接 : http://blog.csdn.net/zxy_snow/article/details/6870127 题意:给你n个立方体,求覆盖三次以上(包括三次)的区域的体积 思路:先将z坐标 ...

  9. JS正则汇总

    1.基本定义: \s:用于匹配单个空格符,包括tab键和换行符; \S:用于匹配除单个空格符之外的所有字符; \d:用于匹配从0到9的数字; \w:用于匹配字母,数字或下划线字符; \W:用于匹配所有 ...

  10. HDU 1041 Computer Transformation (简单大数)

    Computer Transformation http://acm.hdu.edu.cn/showproblem.php?pid=1041 Problem Description A sequenc ...