<!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. 05showLoading配置和 <text>标签的坑 如何发送请求 分享功能和懒加载

    14-电影-列表-需求分析 小程序里面取数据 没有冒号这么一说 加载动画 在对应页面 js文件中 showLoading你可以去看他的配置     // wx.showLoading() 应用在让用户 ...

  2. 2019CCPC 秦皇岛 E.Escape

    传送门 题意: 给出一个\(n*m\)的迷宫,有\(a\)个入口,\(b\)个出口. 现在有\(a\)个机器人都从入口出发,一开始方向默认为下,你可以选在在一些格子上面放置一个转向器,转向器有四种: ...

  3. Spring Boot Quartz 动态配置，持久化

    Quartz 是一个很强大的任务调度框架在SpringBoot中也很容易集成 添加依赖: <dependency> <groupId>org.springframework&l ...

  4. 201871010136-赵艳强《面向对象程序设计（Java）》第八周学习总结

    201871010136-赵艳强<面向对象程序设计(Java)>第八周学习总结 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这 ...

  5. 13-numpy笔记-莫烦pandas-1

    代码 import pandas as pd import numpy as np s = pd.Series([1,3,6,np.nan, 44,1]) print('-1-') print(s) ...

  6. 莫烦TensorFlow_04 placeholder

    import tensorflow as tf input1 = tf.placeholder(tf.float32) input2 = tf.placeholder(tf.float32) outp ...

  7. python27期day04：列表、元组、range、作业题。

    1.for循环套for循环: for i in "abc": for x in "egf: print(x) 结果是:e g f e g f e g f  2.99乘法表 ...

  8. Vue之挂载点、变量、事件、js对象、文本指令、过滤器、事件指令和属性指令

    1.vue导入-挂载点 <!DOCTYPE html> <html lang="zh"> <head> <meta charset=&qu ...

  9. JDOJ 2898 删数问题

    洛谷 P1106 删数问题 https://www.luogu.org/problemnew/show/P1106 JDOJ 2898: 删数问题 https://neooj.com:8082/old ...

  10. BBS_02day

    目录 BBS_02day: 展示个人所有文章: 点赞,点彩功能: 评论功能: BBS_02day: 展示个人所有文章: def article_detail(request,username,arti ...