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. idea如何快速查看接口的实现类

    查找接口的实现类: IDEA 风格 ctrl + alt +B 在按F2查看详细文档注解 查看类或接口的继承关系: ctrl + h

  2. http 状态码大全

    状态码大全 1**(信息类):表示接收到请求并且继续处理    100——客户必须继续发出请求    101——客户要求服务器根据请求转换HTTP协议版本  2**(响应成功):表示动作被成功接收.理 ...

  3. 关于lnmp下 phalcon和tp框架下的nginx文件配置

    vim /etc/nginx/sites-available/default   进入修改目录 1.正常项目配置 server { listen 80 default_server; listen [ ...

  4. monkey日志解析

    bash arg: -p (打印monkey命令携带的参数) bash arg: com.dapp.testAPP123 bash arg: --throttle bash arg: 200 bash ...

  5. git本机服务器配置(四)：git+TortoiseGit+gitblit配置本机服务器

    1.配置本机git服务器 1.1 打开gitblit服务器,登录之前设置的服务页面localhost:1081 1.2.登录账号,账号在(三)中有提到. 1.3 打开用户中心 1.4 点击SSH Ke ...

  6. #20175204 张湲祯 2018-2019-2《Java程序设计》第六周学习总结

    20175204 张湲祯 2018-2019-2<Java程序设计>第六周学习总结 教材学习内容总结 -第七章内部类与异常类要点: 一.内部类: Java支持在一个类中定义另一个类,这样的 ...

  7. 初学python之路-day08

    #学习了编码后,还要了解三种字符串.# 一.# 普通字符串:u''以字符作为输出单位,# print(u'abc') # 用于显示abc# # 二进制字符串:b'' 二进制字符串以字节作为输出单位# ...

  8. 关于CSRF

    CSRF介绍 CSRF(Cross-site request forgery)跨站请求伪造,也被称为“One Click Attack”或者Session Riding,通常缩写为CSRF或者XSRF ...

  9. Cesium 中两种添加 model 方法的区别

    概述 Cesium 中包含两种添加 model 的方法,分别为: 通过 viewer.entities.add() 函数添加 通过 viewer.scene.primitives.add() 函数添加 ...

  10. IE外挂

    //引用 Windows/system32/Shell32.dll //引用COM组件 shdocvw.dll (Microsoft Internet Controls) //引用COM组件 msht ...