<!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# string数组转int数组

    //字符串数组(源数组) string[] sNums = new[] {"1", "2"}; //整型数组(目标数组) int[] iNums; //转换方法 ...

  2. :after 写三角形 border

    .tooltip:after { content: ''; position: absolute; border: 6px solid #5190ac; border-color: #5190ac t ...

  3. php微信公众号开发

    简单的事例总结: wamp下载安装:https://sourceforge.net/projects/wampserver/ www目录里创建php文件weixin.php <?php head ...

  4. 小程序swiper效果高宽设置（微信小程序交流群：604788754）

    swiper的宽和高一定要设置在swiper上面.swiper-item默认继承swiper的宽和高.swiper-item容器里面的宽和高没有继承他的父节点宽和高,需要从新设置. 不明白之处,可以咨 ...

  5. asp.net MVC之Action过滤器浅析

    在asp.net MVC中,Action过滤器是一大利器,它可以在以下两个步骤执行相关的代码: 1.执行Action方法之前:OnActionExecuting 2.Action方法执行完毕后:OnA ...

  6. [Leetcode 122]买股票II Best Time to Buy and Sell Stock II

    [题目] Say you have an array for which the ith element is the price of a given stock on day i. Design ...

  7. AOP 实现请求参数打印

    1.编写打印方法 import java.util.Enumeration; import javax.servlet.http.HttpServletRequest; import org.aspe ...

  8. Asp.Net MVC3.0中防止跨站的POST

    在Form中添加 @Html.AntiForgeryToken(); 在后台的Action中增加 [ValidateAntiForgeryToken] 这个方法还可以添加自定义的参数 @Html.An ...

  9. 如何用UltraEdit查看并修改Oracle导出的dump文件的字符集

    如何查询dmp文件的字符集 用oracle的exp工具导出的dmp文件也包含了字符集信息,dmp文件的第2和第3个字节记录了dmp文件的字符集.如果dmp文件不大,比如只有几M或几十M,可以用Ultr ...

  10. 18-10-15 服务器删除数据的方法【Elasticsearch 数据删除 (delete_by_query 插件安装使用)】方法二没有成功

    rpa 都是5.xx  ueba 分为2.0 或者5.0 上海吴工删除数据的方法 在许多项目中,用户提供的数据存储盘大小有限,在运行一段时间后,大小不够就需要删除历史的 Elasticsearch 数 ...