<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        .box1 {

            display: table;

        }

        .box2 {

            display: table-cell;

            border: 1px solid #000;

        }

        .box3 {

            width: 1%;

            display: table-cell;

            background-color: red;

        }

        /*

            box3 = 1%

            得出

            box2 = 99%

            box3 = 32px

            box2 = 32 * 99 = 3168

            body 1366

            得出

            box2 = body - box3 = 1366 - 32 = 1334

         */

    </style>

</head>

<body>

    <div class="box1">

        <div class="box2">box2</div>

        <div class="box3">box3</div>

    </div>

</body>

</html>

display: table; 100%的宽度的更多相关文章

  1. display:table 水平居中

    <div style="width:auto; margin:auto;display:table"> <div style="width: 100px ...

  2. display:table布局总结

    1. table布局方式 2. table布局实际应用 效果: 代码: <!DOCTYPE html> <html lang="en"> <head& ...

  3. [转]基于display:table的CSS布局

    当IE8发布时,它将支持很多新的CSS display属性值,包括与表格相关的属性值:table.table-row和table-cell,它也是最后一款支持这些属性值的主流浏览器.它标志着复杂CSS ...

  4. CSS display:table属性用法- 轻松实现了三栏等高布局

    display:table:此元素会作为块级表格来显示(类似 <table>); display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签.目前IE8+以 ...

  5. 记录display:table的使用

    兼容性:不兼容IE7 1.左右对齐 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  6. 基于CSS属性display:table的表格布局的使用

    项目改造中遇到DIV+CSS实现的table,新需求需要在表格使用单元格合并,网上调查返现CSS display:table实现的table表格,没有单元格的属性和样式,经过一番思考,曲折现实了单元格 ...

  7. VUE2.0 饿了吗视频学习笔记（七-终）：compute,循环,flex,display:table

    一.star组件使用到了computed属性 computed相当于属性的一个实时计算,当对象的某个值改变的时候,会进行实时计算. computed: { starType() { return 's ...

  8. display: table 实现menu等高居中排列

    display: table 属性,顾名思义,就是就像表格一样陈列元素,设置这个属性之后,就具有了表格所特有的某些特性,比如居中对齐之类的. 本篇文章要实现的需求也是非常常见的——左侧栏menu菜单居 ...

  9. css display table使用小例子实验

    display的下面: table: 此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符. table-row 此元素会作为一个表格行显示(类似 <tr>) ...

随机推荐

  1. tls 流量画像——直接使用图像处理的思路探索，待进一步观察

    代码,示意了一个tls的数据内容: import numpy as np import matplotlib.pyplot as pyplot # !!! If on the server, use ...

  2. telnet的装配及xinetd的讨论

    telnet由于是不安全的明文传输所以基本被ssh取代了,尤其是在Linux上:不过还是可能会用到,且启停方式还有些不同所以还是有必要说明一下. rpm -qa | grep telnet #查看是否 ...

  3. 快速搭建springboot框架以及整合ssm+shiro+安装Rabbitmq和Erlang、Mysql下载与配置

    1.快速搭建springboot框架(在idea中): file–>new project–>Spring Initializr–>next–>然后一直下一步. 然后复制一下代 ...

  4. WinForm之窗体应用程序

    WinForm之窗体应用程序 基本简单数据库操作(增删改查) using System; using System.Collections.Generic; using System.Windows. ...

  5. win10与centos7的双系统U盘安装（三：win10启动项的恢复）

    启动项的恢复比起前面两篇就简单多了,就是一个修改启动项的引导文件即可. 首先登陆超级管理员账户,也就是账号为root,密码为你在篇2设置的密码,注意linux系统下输入的密码不可见,小白容易误以为是b ...

  6. UVA 11464 - Even Parity 状态压缩，分析 难度: 2

    题目 https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&a ...

  7. day02 运算符和编码

    今日所学 主要是运算符和编码的初认识, 1   还有比较运算 ==,!=,<>,>,<,>=,<=等 2  .  赋值运算 =,+=,-=等 还有今天的难点逻辑运算 ...

  8. JavaWeb基础-Session和Cookie

    JSP状态管理 http的无状态性,服务器不会记得发送请求的浏览器是哪一个 保存用户状态的两大机制:session和cookie Cookie:是web服务器保存在客户端的一系列文本信息 作用:对特定 ...

  9. Alpha冲刺2

    前言 队名:拖鞋旅游队 组长博客:https://www.cnblogs.com/Sulumer/p/9960487.html 作业博客:https://edu.cnblogs.com/campus/ ...

  10. <Consistency><of HBase><CAP><ACID>

    Overview 讨论一些(分布式)(存储)系统的一致性 CAP原理 随着分布式事务的出现,传统的单机事务模型(ACID)已经无法胜任,尤其是对于一个高访问量.高并发的互联网分布式系统来说. 如何构建 ...