<!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. PHP如何自定义PHP内置函数

    其实对于PHP程序员,有个纯PHP的解决方案.在php.ini里有个配置项 auto_prepend_file,可以设置一个PHP文件作为每次执行前自动加载的文件. 在这个文件里写函数,你就可以当成定 ...

  2. OpenJDK换为JDK（CentOS）

    说明:应该来说没必要非把OpenJDK卸载掉,只要让$PATH中我们安装的jdk的目录较OpenJDK所在的/usr/bin先出现就好了:简言之跳过下边的第一步直接从第二步开始更科学一些. 1.卸载O ...

  3. js string对象方法

    substr(start,length) substring(start,end) 返回子串,原字符串不改变.

  4. 【oracle】oracle REGEXP_SUBSTR分割字符串

    REGEXP_SUBSTR的使用:通过REGEXP_SUBSTR进行数据分割: , LEVEL, 'i') AS STR FROM DUAL CONNECT BY LEVEL <= LENGTH ...

  5. UVa LA 3882 - And Then There Was One 递推，动态规划 难度: 2

    题目 https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&page=show_pr ...

  6. java局部变量，成员变量在堆和栈中的存储

    对于局部变量,如果是基本类型,会把值直接存储在栈:如果是引用类型,比如String s = new String("william");会把其对象存储在堆,而把这个对象的引用(指针 ...

  7. Fedora防火墙配置

    简介: Fedora 18以及之后的版本,防火墙的管理不再基于iptables,而基于firewall的东西.firewall的功能相对复杂一些,可以控制服务,控制端口,设置安全区域,设置端口转发等功 ...

  8. 初始JSP

    什么是JSP 1.JSP(Java Server Pages):在HTML中嵌入Java脚本代码 静态内容是JSP页面中的静态文本,其基本是HTML文本,与Java和JSP语法无关. 例子: 运行结果 ...

  9. 安装ubuntu　gnome桌面

    注意: ubuntu 14.04.5默认的为unity桌面,有多点触发,没有自带Tweak Tool工具. 安装gnome桌面 sudo apt-get install ubuntu-gnome-de ...

  10. 2.13 C++拷贝构造函数

    参考:http://www.weixueyuan.net/view/6344.html 总结: 如果拷贝构造函数的参数不是对象的引用,则是不允许的.如 book(book b); 是无法编译通过的. ...