一个使用 text-align: justify; 使元素均匀分布的小例子：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>justify</title>

    <style>

    ul,dl {

        margin: 100px auto;

        border: 3px solid #999;

        width: 80%;

        padding: 0;

        list-style: none;

        line-height: 1;

        font-size: 0;

    }

    li {

        display: inline-block;

        width: 20%;

        text-align: center;

    }

    span,dd {

        display: inline-block;

        width: 80px;

        line-height: 80px;

        text-align: center;

        background: #123;

        color: #fff;

        font-size: 28px;

    }

    dl {

        height: 80px;

        text-align: justify;

        overflow: hidden;

    }

    dl:after {

        content: "_";

        font-size: 5000px;

        /*用来制造换行效果*/

    }

    dd {

        margin: 0;

        margin-right: -1px;

    }

    </style>

</head>

<body>

    <ul>

        <li><span>1</span></li>

        <li><span>2</span></li>

        <li><span>3</span></li>

        <li><span>4</span></li>

        <li><span>5</span></li>

    </ul>

    <dl>

        <dd>1</dd>

        <dd>2</dd>

        <dd>3</dd>

        <dd>4</dd>

        <dd>5</dd>

        <dd>6</dd>

    </dl>

</body>

</html>

效果如图：

上面一列是固定个数，下面可以是任意个数。

关键是使用 :after 来制造换行效果。

text-align:justify小例子的更多相关文章

  1. JavaScript小例子：复选框全选

    JavaScript小例子:复选框全选 这只是一个小例子,很简单,但是这个功能还是很常用的: 实现后效果如图: JavaScript代码: <script type="text/jav ...

  2. 【zTree】 zTree使用的 小例子

    使用zTree树不是第一次了  但是 还是翻阅着之前做的 对照着 使用起来比较方便  这里就把小例子列出来   总结一下使用步骤 这样方便下次使用起来方便一点 使用zTree树的步骤: 1.首先  在 ...

  3. c# BackGroundWorker 多线程操作的小例子

    在我们的程序中,经常会有一些耗时较长的运算,为了保证用户体验,不引起界面不响应,我们一般会采用多线程操作,让耗时操作在后台完成,完成后再进行处理或给出提示,在运行中,也会时时去刷新界面上的进度条等显示 ...

  4. ASP.NET Cookie对象到底是毛啊？（简单小例子）

    记得刚接触asp.net的时候,就被几个概念搞的头痛不已,比如Request,Response,Session和Cookie.然后还各种在搜索引擎搜,各种问同事的,但是结果就是自己还是很懵的节奏. 那 ...

  5. c#几个小例子引发的思考

    楚广明老师的c#教程每一节都会给出几个小例子让大家联系,对于初学者来说这确实是一件很纠结的事情,下面我把这几个小例子简单的写一下.同时看一下我们学到了什么 1.面向过程版的圆周长面积计算 using ...

  6. Ajax入门小例子

    大牛文章:http://www.cnblogs.com/guduoduo/p/3681296.html                               ---Ajax基础学习 http:/ ...

  7. JS模拟键盘事件 -- 原理及小例子

    提问: 键盘默认事件,比如tab切换,alt+f4关闭,ctrl+t新建等,如果不想通过键盘而是一些按钮点击来触发这些功能,该咋办呢? 例子: 先以tab为例上一个小例子: <!DOCTYPE ...

  8. 我的Android进阶之旅------>Android拍照小例子

    今天简单的学习了一下android拍照的简单实现. 当然该程序是个小例子,非常简单,没有什么复杂的操作,但是可以学习到Android 拍照API流程. 1.在布局文件中添加一个 surfaceView ...

  9. C# 关于委托的小例子

    本例子是一个关于委托的小例子[猫叫,狗跳,人喊]. 委托是C#开发中一个非常重要的概念,理解起来也和常规的方法不同,但一旦理解清楚,就可以信手拈来,随处可用. 委托是对方法的抽象.它存储的就是一系列具 ...

随机推荐

  1. sitecore（key\value\language）的灵活应用

    1.当我们在做网站的时候是否会因为一个页面的文字变动来回改变.这样的麻烦sitecore都帮我们解决了. 2.sitecore分类key和value和语言几个维度.不同的key会因为不同的语言显示不同 ...

  2. recovery编译汉化

    当BoardConfig.mk中定义了recovery的字体且为中文字体时,自动编译为中文版,否则编译为英文版 例如: BOARD_USE_CUSTOM_RECOVERY_FONT := \" ...

  3. QT中使用Glut库

    用Qt中的QGLWidget窗体类中是不包括glut工具库的,难怪在myGLWidget(在我的程序中是QGLWidget的派生类)中绘制实心球体是说“glutSolidSphere”: 找不到标识符 ...

  4. (摘自ItPub)物理standby中switchover时switchover pending的解决办法

    http://www.itpub.net/thread-1782245-1-1.html DataGuard一主一物理备,sid为primary和standby,现在要把primary切换成备库,st ...

  5. hadoop深入研究:(十八)——Avro schema兼容

    转载请写明来源地址:http://blog.csdn.net/lastsweetop/article/details/9900129 所有源码在github上,https://github.com/l ...

  6. unix网络编程之简介

    通常客户一次只与一个服务器通信, 上图为:一个服务器同时处理多个客户的请求. 上图为:客户与服务器使用TCP协议在同一个以太网中通信. 路由器是广域网的架构设备.今天,最大的广域网是因特网. 上图为: ...

  7. Linux系统编程（26）——守护进程

    Linux系统启动时会启动很多系统服务进程,比如inetd,这些系统服务进程没有控制终端,不能直接和用户交互.其它进程都是在用户登录或运行程序时创建,在运行结束或用户注销时终止,但系统服务进程不受用户 ...

  8. 通过 iTextSharp 实现PDF 审核盖章

    最近需要做一个PDF自动审核盖章的工作,其实就是读取PDF,然后再最后一页加入一个审核章印图片上去.看起来很简单,不过在开发过程中,还是遇到了一些问题,在这里记录一下. 主要遇到的问题是页面的旋转 和 ...

  9. 【Linux】部署apache

    部署前的准备: 1.安装apr #wget http://mirror.bit.edu.cn/apache/apr/apr-1.4.8.tar.gz #tar -zxvf apr-1.4.8.tar. ...

  10. 深入理解linux网络技术内幕读书笔记(十)--帧的接收

    Table of Contents 1 概述 1.1 帧接收的中断处理 2 设备的开启与关闭 3 队列 4 通知内核帧已接收:NAPI和netif_rx 4.1 NAPI简介 4.1.1 NAPI优点 ...