<!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. 201871010126 王亚涛 《面向对象程序设计JAVA》第十四周学习总结

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

  2. PAC在异常检测中的应用

    注:资料均来源于网络,本文只做知识分享,如侵立删,谢谢. PAC算法背景简述: 在许多领域的研究与应用中,通常需要对含有多个变量的数据进行观测,收集大量数据后进行分析寻找规律.多变量大数据集无疑会为研 ...

  3. Python成绩单雷达图

    1numpy库 numpy 是 python 的科学计算库 部分功能: 1.使用numpy读取txt文件 # dtype = "str":指定数据格式 # delimiter = ...

  4. VIJOS-P1325 桐桐的糖果计划

    VIJOS-P1325 桐桐的糖果计划 JDOJ 1432 桐桐的糖果计划 https://neooj.com/oldoj/problem.php?id=1432 Description 桐桐很喜欢吃 ...

  5. .net使用IIdentity和IPrincipal实现自定义身份及权限认证【转】

    1,通过继承BasePage页实现角色权限控制 context.User中保存的信息就是相关的角色与权限信息.Context.User类型为System.Security.Principal.IPri ...

  6. ESA2GJK1DH1K升级篇: 快速的移植升级程序到自己的项目(APP用户程序制作)

    前言 用户程序比较简单,但是起着至关重要的作用 用户程序是和BootLoader程序相互配合的 拷贝文件到自己的项目 APP用户程序的 stmflash.c stmflash.h 和 上一节的Boot ...

  7. <Array> 41 134

    41. First Missing Positive 思路是把1放在数组第一个位置 nums[0],2放在第二个位置 nums[1],即需要把 nums[i] 放在 nums[nums[i] - 1] ...

  8. 牛客CSP-S提高组赛前集训营2 ———— 2019.10.31

    比赛链接 期望得分:100+20+20 实际得分:40+20+30 awa  cccc T1 :基于贪心的思路,然后开始爆搜(雾 那必然是会死的,好吧他就是死了 #include<iostrea ...

  9. 洛谷 P5021 [NOIP2018]赛道重建

    洛谷 P5021 [NOIP2018]赛道重建 传送门 思路 思路就是常规的思路,所以就不说了--我就是来记录一下我的\(AC\)之路的,真的是太爽了 没错--我也是一个个打的部分分,最后终于AC的, ...

  10. 字符串s倒序输出

    编程将字符串s倒序输出,要求利用函数递归实现. 输入格式要求:"%s" 提示信息:"input your string:\n" 输出格式要求:"%c& ...