<!DOCTYPE HTML>

 <html>

     <head>

         <title>文本两端对齐 by hongchenok</title>

         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

         <style>

             .box{

                 width:50%;

                 padding:20px;

                 margin:20px auto;

                 background-color:#f0f3f9;

                 text-align:justify;

                 text-justify:distribute-all-lines;/*ie6-8*/

             }

             .list{

                 width:120px;

                 display:inline-block;

                 *display: inline;

                 *zoom:1;

                 padding-bottom:20px;

                 text-align:center;

                 vertical-align:top;

             }

             .justify_fix{

                 display:inline-block;

                 *display: inline;

                 *zoom:1; width:100%;

                 height:0;

                 overflow:hidden;

             }

             .list_head{

                 height: 50px;

                 width: 50px;

                 background-color: red;

                 float: left;

             }

             .list_content{

                 width: 70px;

                 height: 50px;

                 float: left;

             }

             .clearfix:after {

                 content: ".";

                 display: block;

                 height: 0;

                 clear: both;

                 visibility: hidden;

             }

             * html .clearfix {height: 1%;}

         </style>

     </head>

     <body>

         <div class="box">

             <div class="list clearfix">

                 <div class="list_head"></div>

                 <div class="list_content">这是内容</div>

             </div>

             <div class="list clearfix">

                 <div class="list_head"></div>

                 <div class="list_content">这是内容</div>

             </div>

             <span class="justify_fix"></span>

         </div>

         <div class="box">

             <div class="list clearfix">

                 <div class="list_head"></div>

                 <div class="list_content">这是内容</div>

             </div>

             <div class="list clearfix">

                 <div class="list_head"></div>

                 <div class="list_content">这是内容</div>

             </div>

             <div class="list clearfix">

                 <div class="list_head"></div>

                 <div class="list_content">这是内容</div>

             </div>

             <div class="list clearfix">

                 <div class="list_head"></div>

                 <div class="list_content">这是内容</div>

             </div>

             <span class="justify_fix"></span>

         </div>

     </body>

 </html>

要点：

1. inline-block使用及ie兼容

2. 末行填充justify_fix元素

3. ie兼容：text-justify:distribute-all-lines;

自适应的两端对齐：text-align:justify的更多相关文章

  1. CSS:两端对齐原理(text-align:justify)

    我是一个小白我是一个小白我是一个小白喷我吧,哈哈 写样式的是时候经常会碰到字体两端对齐的效果,一般就网上找端css样式复制下就结束了,没有考虑过原理是啥贴下代码 <head> <me ...

  2. css方法1（清除ul边距间隙，两端对齐，字母大写，首字放大）

    一.清除ul自带左边间距 ul{ margin:; padding:; } 二.ul li 与li  之间隙 1.ul 设置font-size:0 ; 子li 设置字体大小 2.把li写到一起,不换行 ...

  3. css实现div内一段文本的两端对齐

    在一个固定宽度的div内,使得P标签内的文本两端对齐: text-align: justify;text-justify:inter-ideograph; <!DOCTYPE html> ...

  4. CSS中英文字符两端对齐实现

    两端对齐实现 一般加上下面2行就可实现 display: inline-block; text-align: justify; 但是对于中英文混杂的情况,中英文难一起实现对齐,原因在下面有分析,需要如 ...

  5. 两端对齐布局与text-align:justify

    百分比实现 首先最简单的是使用百分比实现,如下一个展示列表: <!DOCTYPE html> <html> <head> <meta charset=&quo ...

  6. 完美 全兼容 解决 文字两端对齐 justify 中文姓名对齐

    text-align:justify; 所有浏览器都支持,text-justify之类的却只有IE支持,就不要考虑了. justify我的理解,使元素内部的子元素两端对齐,子元素当然只能是inline ...

  7. CSS3 justify 文本两端对齐

    浏览器参照基准:Firefox4 and Later, Chrome5 and Later, Safari5 and Later, Opera10.53 and Later, IE5.5 and La ...

  8. 使用text-align:justify，让内容两端对齐，兼容IE及主流浏览器的方法

    如果不喜欢看分析过程,可以跳到最后看最终兼容方案 史前方法: 以前实现两端对齐是这样的: <p class="box1">密  码</p> <p cl ...

  9. CSS图片两端对齐，自适应列表布局末行对齐修复实例页面

    写在前面 前端开发,图片两端对齐,是十分常见的,也是十分痛苦的,我试过好多方法,通过整理,认为下面还是比较靠谱的,在实践中大家可以试试,欢迎一起学习,一起进步 HTML代码 HTML代码非常简单,用的 ...

随机推荐

  1. C++游戏系列2：角色装备武器

    很多其它见:C++游戏系列文件夹 知识点:类的组合,A类的数据成员.是B类的对象,或B类的对象.做A类的数据成员 [项目-带武器的游戏角色] 设计一个武器类,其数据成员至少要有武器名.威力,还能够加上 ...

  2. weblogic 修改控制台console访问路径 url

    出于安全的考虑需要对weblogic的console进行屏避,或者修改默认的访问路径,主要有两种方法:(这里针对weblogic8.1) 一.进入默认的控制台,例如“localhost/console ...

  3. [git] csdn之code平台的使用

    简单的说一下GIT的使用.... 代码和托管平台是csdn刚出来没多久的code.csdn.net [中文的界面什么的简单点,好理解,嗯,易用....] Git 使用最新版:Git-1.8.4-pre ...

  4. Difference between exit() and sys.exit() in Python

    Difference between exit() and sys.exit() in Python - Stack Overflow https://stackoverflow.com/questi ...

  5. createDocumentFragment 文档碎片提升dom增删的性能

    原理: 操作dom会使得页面进行重新渲染,如果 经常性的对dom就行操作或者一次性操作dom较多,每一次操作都会使页面进行重新渲染,降低页面加载性能. 针对IE9以下,可以使用文档碎片(documen ...

  6. POJ3259 Wormholes —— spfa求负环

    题目链接:http://poj.org/problem?id=3259 Wormholes Time Limit: 2000MS   Memory Limit: 65536K Total Submis ...

  7. Centos6.8更好yum源

    第一步:备份你的原镜像文件,以免出错后可以恢复. mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.back ...

  8. dedecms时间格式调用标签汇总

    1.时间格式{dede:field name='pubdate' function='strftime("%Y年%m月%d日 %H:%M:%S","@me")' ...

  9. 自己封装的Ajax - JavaScript

    1. [代码][JavaScript]代码      //javascript Object: ajax Object//Created By RexLeefunction Ajax(url,data ...

  10. Kappa:比Lambda更好更灵活的实时处理架构

    为了进一步探讨这种批处理和实时处理有效整合在同一系统的架构,我们将在今天的文章中分析Lambda三层结构模型的适用场景,同时暴露出Lambda架构一个最明显的问题:它需要维护两套分别跑在批处理和实时计 ...