我希望在页面上画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. preseed.cfg分区设定案例

    很久之前做ubuntu的PXE配置ubuntu的preseed费了很大的力气,总结的不多,现在温习一下. 就我所接触的,有分区普通磁盘,LVM,和raid三种方式.其中前两中方式比较多,raid方式是 ...

  2. cacti install on ubuntu

    安装cacti需要的软件需要 nginx + php + mysql + rrdtool + cacti + snmp 1.nginx 安装配置 首先按照如下命令安装,明显是马虎不细心./config ...

  3. 自学php笔记

          1,函数名称是不区分大小写的,但是变量名称是区分大小写的, 2,在MySql中sql执行的语句是不分大小写的,但数据库和表名是区分大小写的 3,在sql语句中,字符串要用一组单引号 ' ' ...

  4. log4j.xml配置文件

    <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE log4j:configuration S ...

  5. 7-Highcharts曲线图之分辨带

    <!DOCTYPE> <html lang='en'> <head> <title>7-Highcharts曲线图之分辨带</title> ...

  6. BZOJ 1088

    真是智商不够, 智商题:.... 假如:第1,2个格子已知,然后根据第二列的情况,就可以把所有满足的情况推出来,又萌萌哒.. 无耻攒字数: #include<stdio.h> using ...

  7. ［翻译］The Neophyte's Guide to Scala Part 12: Type Classes

    The Neophyte's Guide to Scala Part 12: Type Classes 过去的两周我们讨论了一些使我们保持DRY和灵活性的函数式编程技术,特别是函数组合,partial ...

  8. C4.5决策树--Java

    ID3是以信息增益作为划分训练数据集的特征,即认为信息增益大的特征是对分类结果影响更大,但是信息增益的方法偏向于选择取值较多的特征,因此引入了C4.5决策树,也就是使用信息增益率(比)来作为划分数据集 ...

  9. Android线程消息通信（二）

    创建线程消息队列 Android应用程序的消息队列是使用一个MessageQueue对象来描述的,它可以通过调用Looper类的静态成员函数prepareMainLooper或者prepare来创建, ...

  10. HDU 1026 Ignatius and the Princess I （BFS）

    题目链接 题意 : 从(0,0)点走到(N-1,M-1)点,问最少时间. 思路 : BFS..... #include <stdio.h> #include <string.h> ...