<!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. C#实体对象序列化成Json并让字段的首字母小写的两种解决方法

    引言:最近在工作中遇到与某些API对接的post的数据需要将对象的字段首字母小写.解决办法有两种:第一种:使用对象的字段属性设置JsonProperty来实现(不推荐,因为需要手动的修改每个字段的属性 ...

  2. corePoolSize和maxPoolSize的区别

    受限于硬件.内存和性能,我们不可能无限制的创建任意数量的线程,每一台机器允许的最大线程是一个有界值.因此ThreadPoolExecutor管理的线程数量是有界的.线程池就是用这些有限个数的线程,去执 ...

  3. POJ 2373 Dividing the Path(DP + 单调队列)

    POJ 2373 Dividing the Path 描述 农夫约翰的牛发现,在他的田里沿着山脊生长的三叶草是特别好的.为了给三叶草浇水,农夫约翰在山脊上安装了喷水器. 为了使安装更容易,每个喷头必须 ...

  4. Annotation方式配置AOP

    package com.xk.spring.kp04_aop.aop.s02_annotation; public interface IStudentService { public void sa ...

  5. java⑥

    import java.util.Scanner; /** * 所有在java.lang包下面的所有类 不需要显示的引入包! * java.util.Scanner : 想获取用户的输入 必须引入相关 ...

  6. OO Summary Ⅲ

    规格化设计的发展历史 (这一部分并没有找到答案,于是参考了好黄和温莎莎的blogs) 1950年代,第一次分离,主程序和子程序的分离程序结构模型是树状模型,子程序可先于主程序编写.通过使用库函数来简化 ...

  7. 读书笔记 C# Type类型与泛型有关的某些属性浅析

    IsGenericType 如果类型为泛型,则返回 true. GetGenericArguments 返回 Type 对象数组,这些对象表示为构造类型提供的类型变量,或泛型类型定义的类型参数.如果是 ...

  8. C++构造函数和析构函数，以及构造函数特殊成员变量和函数的初始化

    body, table{font-family: 微软雅黑; font-size: 10pt} table{border-collapse: collapse; border: solid gray; ...

  9. 房间安排 （nyoj 168）

    题目链接:http://acm.nyist.net/JudgeOnline/problem.php?pid=168 分析:找到一天中需要最多的房间即可 #include<iostream> ...

  10. 三. Python基础(3)--语法

    三. Python基础(3)--语法 1. 字符串格式化的知识补充 tpl = "我是%s,年龄%d,学习进度100%" %('Arroz',18) print(tpl) # 会提 ...