<!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. 【转】vue技术分享-你可能不知道的7个秘密

    一.善用watch的immediate属性 这一点我在项目中也是这么写的.例如有请求需要再也没初始化的时候就执行一次,然后监听他的变化,很多人这么写: created(){ this.fetchPos ...

  2. drozer安装使用教程（Windows）

    drozer和adb一样,又不是新出的工具,本不该出了这么久还要由我这样半懂不懂的再写篇东西了.但是还是一样每次使用都得百度和筛选半天,所以记下来算给自己看.以后看到我还写些老掉牙的东西都是这个原因, ...

  3. php企业建站源码

    php企业建站源码 <?php session_start(); include "./admin/config.php"; include "./right/sq ...

  4. 面向对象的Java实现

    1.面向对象的Java实现--封装 1-1:封装 a.为什么需要封装(封装可以是数据方便维护.增加实用性.方便扩展等等.通过面向对象的思想,模拟现实生活中的事物.) b.什么是封装(封装就是将属性私有 ...

  5. LY.JAVA面向对象编程.形式参数和返回值

    2018-07-09 13:29:16 运动员和教练案例 /* 教练和运动员案例(学生分析然后讲解) 乒乓球运动员和篮球运动员. 乒乓球教练和篮球教练. 为了出国交流,跟乒乓球相关的人员都需要学习英语 ...

  6. Vue笔记：使用 vuex 管理应用状态

    如果你在使用 vue.js , 那么我想你可能会对 vue 组件之间的通信感到崩溃 . 我在使用基于 vue.js 2.0 的UI框架 ElementUI 开发网站的时候 , 就遇到了这种问题 : 一 ...

  7. highcharts，highStock 中文图表配置

    感谢开源的支持! https://github.com/hcharts/highcharts-zh_CN

  8. 【转载】《Learn More Study Less》整体性学习方法

    原文 忘记在哪里看到这本书的介绍了,据说是一个小子自学1年,完成了4年麻省理工的课程,然后写了一本他学习方法的书.我搜了一下,居然中英文版都有,就花时间好好读了一遍,就是这本. 以下是这本书的完整笔记 ...

  9. Java实现将数字转为大写汉字

    public class Int2Big { static String int2big(int src) { final String num[] = {"零", "壹 ...

  10. caffe blob

    Blob,包括输入数据.输出数据.权值等: Blob是Caffe中处理和传递实际数据的数据封装包,并且在CPU与GPU之间具有同步处理能力.从数学意义上说,blob是按C风格连续存储的N维数组. ca ...