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. mysql 5.7~默认sql_mode解读

    当5.6升级到5.7时,首先要注意的就是sql_mode对业务的影响 大概可以分为几类1 共同支持,如果你的5.6和5.7sql_mode配置支持的交集一样,那么不用考虑2 5.7细说  1 ONLY ...

  2. Java基础 -- Java 抽象类 抽象方法

    总结: 1. 抽象类不能被实例化(初学者很容易犯的错),如果被实例化,就会报错,编译无法通过.只有抽象类的非抽象子类可以创建对象. 2. 抽象类中不一定包含抽象方法,但是有抽象方法的类必定是抽象类. ...

  3. 「luogu2387」[NOI2014] 魔法森林

    「luogu2387」[NOI2014] 魔法森林 题目大意 \(n\) 个点 \(m\) 条边的无向图,每条边上有两个权值 \(a,b\),求从 \(1\) 节点到 \(n\) 节点 \(max\{ ...

  4. 20175315 《Java程序设计》第6周学习总结

    20175215 <Java程序设计>第6周学习总结 教材学习内容总结 第七章主要讲的是内部类,匿名类,异常类等等. 内部类:Java支持在一个类中定义另一个类,称作内部类,包含内部类的类 ...

  5. CentOS 7.2 Ubuntu 18部署Rsync + Lsyncd服务实现文件实时同步/备份

    发送端配置: 一.配置密钥 1. 主/从服务器之间启用基于密钥的身份验证.登录发送端服务器并用 " ssh-keygen " 命令生成公共或私有的密钥. 2. 使用 " ...

  6. kubenetes_V1.14.0 安装部署

    k8s的安装有多种方式,如yum安装,kubeadm安装,kubemini安装,二进制安装(生产环境多采用此方式精确控制安装)等.本文是入门系列验证,之前进行过yum安装,可以查看文章<k8s入 ...

  7. get 和free

    1.ngx_pool_t ** ngx_get_pool()//use:getngx_pool_t **pool_address;ngx_pool_t *pool;pool_address = ngx ...

  8. git(windows)

    windows下比较比较好用的git客户端: 1. msysgit + TortoiseGit(乌龟git) 2. GitHub for Windows 3. Git Extensions

  9. .net core WebAPI 初探及连接MySQL

    1. 前言 笔者最近跟着微软官方文档学习.net core WebAPI,但发现其对 WebAPI 连接数据库.读取数据库方面讲得不够细致明了.写此文的目的,即实现 .net core WebAPI ...

  10. SQLAlchemy 使用(二)表关联

    前言 在上一章中我们介绍了 SQLAlchemy 建立基本表,但是一般情况下,表之间是有关联的,比如 一对一/一对多/多对多,当然 SQLAlchemy 是支持建立model时指定关系的 正文 多对一 ...