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. Python——类的封装

    class Gun: def __init__(self, model): # 1. 枪的型号 self.model = model # 2. 子弹的数量 self.bullet_count = 0 ...

  2. SimpleDateFormat 常用用法

    1.SimpleDateFormat函数语法:                   G 年代标志符          y 年          M 月          d 日          h ...

  3. 《利用Python进行数据分析·第2版》

    <利用Python进行数据分析·第2版> 第 1 章 准备工作第 2 章 Python 语法基础,IPython 和 Jupyter第 3 章 Python 的数据结构.函数和文件第 4 ...

  4. MUI上传图片之选择相册和相机上传

    1.因为项目中有三处地方需要上传,所以html中存在三处地方.身份证正反面为上传一张,发票限制上传9张. <div class="action1"> <!--展示 ...

  5. 规范开发目录 及 webpack多环境打包文件配置

    规范开发目录 普通项目 开发目录: ├── project-name ├── README.md ├── .gitignore ├── assets ├── ├── js ├── ├── css ├─ ...

  6. 使用Node.js+Hexo+Github搭建个人博客

    一.为什么要花时间去搭建个人博客? 首先说说为什么我想要尝试着去搭建属于自己的Blog,古人云:“好记性不如烂笔头”.一开始我把笔记做在本子上.电脑上,发现要用的时候特别地不方便,而且越记越多.越多越 ...

  7. MySQL Percona server 5.5 安装审计插件

    近期,公司要求对MySQL 数据库上操作进行审计:通过了解MySQL 官方企业版(付费版)本中集成了audit_log审计插件,但是社区开源版本中并不包含该插件,也没提供下载.进一步了解 MariaD ...

  8. Ajax 统一处理token失效

    complete:function ajax 请求完成激活本事件.这个方法很方便完成ajax 异常的处理. $.ajaxSetup({ contentType:"application/x- ...

  9. spring-cloud-eureka服务注册与发现

    Eureka是Netflix开发的服务发现框架,本身是一个基于REST的服务,主要用于定位运行在AWS域中的中间层服务,以达到负载均衡和中间层服务故障转移的目的.SpringCloud将它集成在其子项 ...

  10. mysql 与 oracle 的时间查询

    关于时间区间查询 1.mysql select * from t_date a where date_format (a.delete_time,'%Y-%m-%d') <date_format ...