display：table用法：

父元素：display:table;

子元素：display：table-cell;

注：使用display:table-cell元素部分出现空白缝隙的问题：设置 .cell{line-height: 0;}

示例：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <link rel="stylesheet" type="text/css" href="css/reset.css"/>

        <style type="text/css">

            .box{width: 100%;}

            .row{

                display: table;

                width: 100%;

            }

            .cell{

                display: table-cell;

                width: 50%;

                background: #FFFAE8;

                vertical-align: middle;

                 text-align: center;

                 line-height: 0;

            }

            .cell:nth-child(2n){

                background: lavender;

            }

            p{margin-bottom: 30px;}

            img{width: 100%;}

        </style>

    </head>

    <body>

        <div class="box">

            <div class="row">

                <div class="cell">

                    <img src="img/1.jpg"/>

                </div>

                <div class="cell">

                    <p>dsjoligjsp</p>

                    <p>dsjoligjsp</p>

                    <p>dsjoligjsp</p>

                </div>

            </div>

        </div>

    </body>

</html>

等高布局display：table的更多相关文章

  1. CSS display:table属性用法- 轻松实现了三栏等高布局

    display:table:此元素会作为块级表格来显示(类似 <table>); display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签.目前IE8+以 ...

  2. [转]基于display:table的CSS布局

    当IE8发布时,它将支持很多新的CSS display属性值,包括与表格相关的属性值:table.table-row和table-cell,它也是最后一款支持这些属性值的主流浏览器.它标志着复杂CSS ...

  3. 基于CSS属性display:table的表格布局的使用

    项目改造中遇到DIV+CSS实现的table,新需求需要在表格使用单元格合并,网上调查返现CSS display:table实现的table表格,没有单元格的属性和样式,经过一番思考,曲折现实了单元格 ...

  4. css Table布局：基于display:table的CSS布局

    两种类型的表格布局 你有两种方式使用表格布局 -HTML Table(<table>标签)和CSS Table(display:table 等相关属性). HTML Table是指使用原生 ...

  5. css display:table圣杯布局

    圣杯布局指的是一个网页由页眉,3等高列(2个固定侧栏和中心内容主体)和贴在页面底部的页脚组成. 主要思路是对整个容器使用地上diaplay:table 的css规则,然后分别对页眉页脚使用displa ...

  6. display:table布局总结

    1. table布局方式 2. table布局实际应用 效果: 代码: <!DOCTYPE html> <html lang="en"> <head& ...

  7. 使用display:table使两栏布局高度相等

    两栏布局大家应该经常用了,但是遇到坑爹的要两栏的高度对齐的话要怎么办呢? <!DOCTYPE html> <html> <head> <meta charse ...

  8. CSS等高布局的6种方式

    × 目录 [1]边框模拟 [2]负margin [3]table[4]absolute[5]flex[6]js 前面的话 等高布局是指子元素在父元素中高度相等的布局方式.等高布局的实现包括伪等高和真等 ...

  9. css设置多列等高布局

    初始时,多个列内容大小不同,高度不同.现在需要设置不同的背景来显示,而且各个列的高度需要保持一致.那么这就需要利用到多列等高布局. 最终需要的效果: 1. 真实等高布局 flex 技术点:弹性盒子布局 ...

随机推荐

  1. JPanel与JFrame的区别

    JPanel与JFrame的区别: Jpanel不是顶级窗口,不能直接输出.它必须放在象JFrame这样的顶级窗口上才能输出. JcontentPane实际上就是一个JPanel.Jframe中会默认 ...

  2. Python：正则表达式（二）：如何使用re.search()返回的匹配对象中的具体内容呢？？

    在上一篇中讲述了re.seach()会返回一个对象格式的数据,如下:<_sre.SRE_Match object; span=(16, 24), match='${phone}'> 那么问 ...

  3. Spring AOP获取方法的参数名称和参数值

    aop配置: <aop:aspectj-autoproxy expose-proxy="true" /> @Before(value = "execution ...

  4. 适合高要求应用的高性能MEMS IMU解决方案

    对于复杂且高动态惯性配置的MEMS IMU应用,评估功能时需要考虑许多属性.在设计周期早期评估这些属性优于追逐开放性成果,从而实现“尽可能精确”.ADI近期举行的在线研讨会[适合高要求应用的高性能ME ...

  5. Oracle SQL性能优化总结

    1. SQL语句执行步骤 语法分析> 语义分析> 视图转换 >表达式转换> 选择优化器 >选择连接方式 >选择连接顺序 >选择数据的搜索路径 >运行“执 ...

  6. Linux 技巧：让进程在后台可靠运行的几种方法【转】

    我们经常会碰到这样的问题,用 telnet/ssh 登录了远程的 Linux 服务器,运行了一些耗时较长的任务, 结果却由于网络的不稳定导致任务中途失败.如何让命令提交后不受本地关闭终端窗口/网络断开 ...

  7. 先安装VS后安装IIS，注册IIS方法

    IIS和VS安装顺序: 最好的顺序是先安装IIS,然后安装VS. 因为在安装VS的时候,安装程序会自动检测计算机上是否安装IIS,若有,则将.NET的当前版本注册到IIS,比如安装VS2010,VS2 ...

  8. 怎样解决if __name__ == "__main__":下面的代码没有执行的问题

    很多初学者可能在用pycharm运行代码时会出现if __name__ == "__main__":下面的代码没有执行的问题,出现这类问题的原因是unittest运行姿势造成的,如 ...

  9. Java线段树

    线段树不是完全二叉树,是平衡二叉树 堆也是平衡二叉树 堆满二叉树: h层,一共有2^h-1个节点(大约是2^h) 最后一层(h-1层)有2^(h-1)个节点 最后一层的节点数大致等于前面所有层节点之和 ...

  10. .net基础学java系列（二）IDE 之 插件

    上一篇文章.net基础学java系列(二)IDE "扎实的基础"+"宽广的视野",基本可以帮我们摆脱码畜.码奴.码农的命运! IT领袖:IT大哥:IT精英:IT ...