<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>实际是将其转为table</title>

        <link rel="stylesheet" href="plugins/bootstrap/css/bootstrap.min.css" />

        <style>

            .div{

                border: 1px solid saddlebrown;

                border-spacing: 15px;

                width: 30%;

                display: table;

            }

            .div1{

                display: table-cell;

                width: 100px;

                height:150px;

                background-color: royalblue;

                vertical-align: middle;

            }

            .div2{

                display: table-cell;

                border: 1px solid seagreen;

                padding:10px;

            }

        </style>

    </head>

    <body>

        <div class="div">

            <div class="div1"></div>

            <div class="div2">

                发舒服舒服舒服舒服水电费

                发舒服舒服舒服舒服水电费

                发舒服舒服舒服舒服水电费

                发舒服舒服舒服舒服水电费

                发舒服舒服舒服舒服水电费

                发舒服舒服舒服舒服水电费

            </div>

        </div>

    </body>

</html>

div等高布局的更多相关文章

  1. 两个同级div等高布局

    显示效果: css代码如下 .wrap{ overflow:hidden; } .left{ width:30%; background:#09C; } .right{ width:70%; back ...

  2. 纯CSS实现三列DIV等高布局

    <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...

  3. css圣杯布局、等高布局

    所谓圣杯布局,就是自适应浏览器的分辨率,也称双飞翼布局. 例子: <style> body{margin:0;} .center{height:600px;background:#f60; ...

  4. div两栏等高布局

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  5. 布局两列div等高方法

    一.左右布局,左侧div绝对定位,外div相对定位 <!DOCTYPE html> <html lang="en"> <head> <me ...

  6. 纯css实现div三列等高布局的最简单方法简化版/也可以多列

    使用正padding和负margin对冲实现多列布局方法 这种方法很简单,就是在所有列中使用正的上.下padding和负的上.下margin,并在所有列外面加上一个容器,并设置overflow:hid ...

  7. CSS3中flexbox如何实现水平垂直居中和三列等高布局

    最近这些天都在弥补css以及css3的基础知识,在打开网页的时候,发现了火狐默认首页上有这样一个东西.

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

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

  9. HTML CSS + DIV实现整体布局

    HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...

随机推荐

  1. 封装tab组件

    =====>tab切换组件的封装 wx:key="{{index}} 绑定标识 它的下标是从0开始的 {{currentIndex==index ? "active" ...

  2. V4l2初识（七）-----------浅析app获取虚拟摄像头数据的过程

    继续分析数据的获取过程: 1.请求分配的缓冲区: ioctl(4,VIDIOC_REQBUFS) vidioc_reqbufs 2.查询和映射缓冲区   ioctl(4,VIDIOC_QUERYBUF ...

  3. 第十一周博客作业 <西北师范大学| 周安伟>

    第十一周助教作业 助教博客链接https://home.cnblogs.com/u/zaw-315/ 作业要求链接https://www.cnblogs.com/nwnu-daizh/p/107615 ...

  4. uiautomator输入中文实例

    package com.demo3; import jp.jun_nama.test.utf7ime.helper.Utf7ImeHelper; import com.android.uiautoma ...

  5. 生产者和消费者模型producer and consumer(单线程下实现高并发）

    #1.生产者和消费者模型producer and consumer modelimport timedef producer(): ret = [] for i in range(2): time.s ...

  6. 【java】获取昨天/今天/明天日期

    昨天: SimpleDateFormat sdf=new SimpleDateFormat("yyyMMdd"); Calendar calendar = new Gregoria ...

  7. async-profiler 容器使用常见问题

    Failed to inject profiler log Failed to inject profiler into 1830 linux-vdso.so.1 => (0x00007ffdf ...

  8. sed和awk练习及知识点

    一.针对/etc/passwd操作 1.sed操作,将文件中的第九行至第十五行复制到第16行下. [root@ns1 lianxi]# sed '9,15H;16G' /etc/passwd 2.用a ...

  9. NLP之分词

    不同分词工具原理解析 对各种分词工具的介绍,具体参考: http://www.cnblogs.com/en-heng/p/6234006.html 1) jieba 具体参考: https://blo ...

  10. Linux性能优化实战学习笔记：第五十二讲

    一.上节回顾 上一节,我们一起学习了怎么使用动态追踪来观察应用程序和内核的行为.先简单来回顾一下.所谓动态追踪,就是在系统或者应用程序还在正常运行的时候,通过内核中提供的探针,来动态追踪它们的行为,从 ...