<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <style>

    .clearfix:after {

        content: '';

        display: table;

        clear: both;

    }

    .clearfix {

        *zoom: 1;

    }

    .cr {

        background-color: red;

    }

    .cg {

        background-color: green;

    }

    .float-left {

        float: left;

        margin-right: 10px;

        width: 100px;

        height: 300px;

    }

    .auto-right {

        display: table-cell;

        width: 10000px;

        height: 200px;

    }

    .fixed-table {

      font-size: 40px;

      display: table;

      table-layout: fixed;

      width: 100%;

    }

    .fixed-table div {

      overflow: hidden;

      text-overflow: ellipsis;

    }

    </style>

</head>

<body>

    <div class="clearfix">

        <div class="float-left cr"></div>

        <div class="auto-right cg">

          <div class="fixed-table">

            <div>

                ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff

            </div>

          </div>

        </div>

    </div>

</body>

</html>

display: table-cell里面文字打点的方法的更多相关文章

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

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

  2. css Table布局：基于display:table的CSS布局

    两种类型的表格布局 你有两种方式使用表格布局 -HTML Table(<table>标签)和CSS Table(display:table 等相关属性). HTML Table是指使用原生 ...

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

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

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

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

  5. display:table和display:table-cell结合使用

    .GoodList{ display :table; height :54px; width :56px; line-height: 14px                 padding: 0 1 ...

  6. display:table和display:table-cell的妙用

    display的table和table-cell一般情况下用的不多,所以很少有人去关注它,但他们两个联手起来会给你惊喜! 这里抛出这样一个问题,如下,让块里的多行文字垂直居中?一说到垂直居中就会想到, ...

  7. display:table的几个妙用：垂直居中、浮动……

    一.为什么不用table系表格元素? 目前,在大多数开发环境中,已经基本不用table元素来做网页布局了,取而代之的是div+css,那么为什么不用table系表格元素呢? 1.用DIV+CSS编写出 ...

  8. display:table布局总结

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

  9. display:table / display:table-cell 用法

    display:table  元素会作为块级表格来显示(类似table):表格前后带有换行符: display:table-cell 元素会作为表格单元格来显示(类似<td> 和 < ...

随机推荐

  1. 《你不知道的JS》上

  2. .NET混合开发解决方案14 WebView2的基本身份验证

    系列目录     [已更新最新开发文章,点击查看详细] WebView2控件应用详解系列博客 .NET桌面程序集成Web网页开发的十种解决方案 .NET混合开发解决方案1 WebView2简介 .NE ...

  3. 3.Docker常用命令

    帮助启动类命令 启动docker: systemctl start docker 停止docker: systemctl stop docker 重启docker: systemctl restart ...

  4. 89. Gray Code - LeetCode

    Question 89. Gray Code Solution 思路: n = 0 0 n = 1 0 1 n = 2 00 01 10 11 n = 3 000 001 010 011 100 10 ...

  5. 学习Java的第十五天——数学运算

    学习内容:数学运算 1.三角函数运算 代码实现: public class 三角函数运算 { public static void main(String[] args) { // TODO 自动生成 ...

  6. ML第3周学习小结

    本周收获 总结一下本周学习内容: 1.学习了<深入浅出Pandas>的第五章:Pandas高级操作的三个内容 复杂查询 数据类型转换 数据排序 我的博客链接: Pandas复杂查询.数据类 ...

  7. 奶盖拌饭 NKOJ8457

    题意:一个无向图,每次询问给出一条边,问这条边的最大值满足这条边一定在这个图的最小生成树上,如果没有上限输出-1. 思路:考场上想过的,将分为两类,(非)树边. 1.亿点性质 非树边:加上这条边所构成 ...

  8. Docker安装Jenkins打包Maven项目为Docker镜像并运行【保姆级图文教学】

    一.前言 Jenkins作为CI.CD的先驱者,虽然现在的风头没有Gitlab强了,但是还是老当益壮,很多中小公司还是使用比较广泛的.最近小编经历了一次Jenkins发包,感觉还不错,所以自己学习了一 ...

  9. Docker容器编译安装Redis

    Docker容器编译安装Redis 1.创建容器 -i 交互模式 -d 后端运行 -h 容器的hostname --name 容器名 --network 网卡 --ip IP地址 -p 端口映射 -- ...

  10. php公立转农历

    <?php function nongli($riqi) { //优化修改 20160807 FXL $nian=date('Y',strtotime($riqi)); $yue=date('m ...