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. Win2012 R2安装 mysql8.0

    1.官网下载安装 官网上面写着x86,其实是兼容x64和x86的,下载安装就行 2.安装navicat 3.navicat连接mysql的时候出现错误 client does not support ...

  2. ICMP shell

    场景 反向shell的场景下使用 原理 ICMP作为获取反向shell的通道 实践 运行 run.sh报错,可能是因为用的Parrot.改一下就可以了 ifconfig | grep 'inet '| ...

  3. go语言中使用defer、panic、recover处理异常

    go语言中的异常处理,没有try...catch等,而是使用defer.panic.recover来处理异常. 1.首先,panic 是用来表示非常严重的不可恢复的错误的.在Go语言中这是一个内置函数 ...

  4. Linux下执行自定义的可执行命令无效原因

    1 前言 用golang编译成可执行文件tt stats text.txt(tt 是编译后重命名的可执行文件),然后直接执行失败了,后来使用./tt stats text.txt可以了. 执行结果如下 ...

  5. spring-cloud-ribbon负载均衡组件

    Ribbon简介: Spring Cloud Ribbon 是一个基于 HTTP 和 TCP 的客户端负载均衡工具,它基于 Netflix Ribbon 实现. 通过 Spring Cloud 的封装 ...

  6. C# 定时任务

    工作中需要做个每天定时发邮件的功能,了解之后知道java里有做定时任务比较容易的方法,就是Quartz,在C#里叫Quartz.Net. 在写代码之前需要引用几个dll文件,分别是C5.dll.Com ...

  7. js中数组对象去重的方法

    var arr = [{ key: '01', value: '乐乐' }, { key: '02', value: '博博' }, { key: '03', value: '淘淘' },{ key: ...

  8. Django By Example 总结

    从3月1号到3月23号总共24天完成了三个项目,时间很赶,学的很充实,但是憋的有点难受了,从下周开始就有上机实验了,抽不出来很多时间学课外的东西了.任务进度拖延了一个星期的进度,主要是因为我懒.... ...

  9. Gradle 打包上传至私有仓库配置

    allprojects{ apply plugin: 'java' apply plugin: 'idea' apply plugin: 'maven' group 'com.xxxxx.base' ...

  10. windows安装node和yarn

    Ubuntu子系统安装和删除yarn 在 Debian 或 Ubuntu 上,需要用 Debian 包仓库来安装 Yarn. 首先需要配置仓库: curl -sS https://dl.yarnpkg ...