<!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. NLP中的预训练语言模型（四）—— 小型化bert（DistillBert, ALBERT, TINYBERT）

    bert之类的预训练模型在NLP各项任务上取得的效果是显著的,但是因为bert的模型参数多,推断速度慢等原因,导致bert在工业界上的应用很难普及,针对预训练模型做模型压缩是促进其在工业界应用的关键, ...

  2. 201871010126 王亚涛《面向对象程序设计（Java）》第十二周学习总结

      内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p/ ...

  3. shell 之for循环几种写法

    参见博客 http://blog.csdn.net/babyfish13/article/details/52981110 ,此博客写的非常清晰明了.

  4. [LeetCode] 854. K-Similar Strings 相似度为K的字符串

    Strings A and B are K-similar (for some non-negative integer K) if we can swap the positions of two ...

  5. 分布式共识算法 (三) Raft算法

    系列目录 分布式共识算法 (一) 背景 分布式共识算法 (二) Paxos算法 分布式共识算法 (三) Raft算法 分布式共识算法 (四) BTF算法 一.引子 1.1 介绍 Raft 是一种为了管 ...

  6. sonatype nexus安装教程

    1. 安装nexus前需要先安装maven.(详见jdk安装教程)2. 将nexus-2.0.2.rar放到d:\teamwork中,点击右键,解压到当前文件夹中.其中包含两个文件夹:nexus,so ...

  7. 姿态角（RPY）的优化目标函数

    在Pose-Graph的过程中,如果使用G2O优化函数库,那么似乎是不用自己编写代价函数(也就是优化目标函数)的,因为G2O有封装好的SE3等格式,使得Pose-Graph的过程变得简单了,即只需要设 ...

  8. kubernetes-harbor 私有仓库 帐号与密码 配置

    如harbor地址:   harbor.qing.cn #docker login harbor.classba.cn #cat /root/.docker/config.json | base64 ...

  9. [解決方案]IIS配置后报错500.21

    如果报错这个信息,那么就是aspnet未注册造成的,需要安装一下 步骤: 1.打开CMD 2.输入cd %windir%\Microsoft.Net\Framework\v4.0.30319 3.执行 ...

  10. Nginx配置max_fails fail_timeout

    目的: 通过配置max_fails.fail_timeout来达到当一台服务器访问出现非200时可以跳转到另一台服务器 操作: 配置nginx.conf文件 具体配置如下 upstream Site ...