<!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. A&DCTF

    ADCTF  WRITEUP 方向:Reverse  解题数:2 题目:Reverse_01 解题过程: 用ida打开反汇编查看代码,看main函数发现 关键部分,字符串比较,竟然是直接比较”is_t ...

  2. android编译遇到问题修改

    (注意要确定安装了jdk) 第一步: cd  lichee; ./build.sh  -p sun5i_elite -k 3.0  (apt-get install uboot-mkimage需要安装 ...

  3. LeetCode 112 Path Sum（路径和）（BT、DP）（*）

    翻译 给定一个二叉树root和一个和sum, 决定这个树是否存在一条从根到叶子的路径使得沿路全部节点的和等于给定的sum. 比如: 给定例如以下二叉树和sum=22. 5 / \ 4 8 / / \ ...

  4. querying rpm database

    Call dbMatch on a transaction set to create a match iterator. As with the C API, a match iterator al ...

  5. Kills all phantomjs instances, disregard of their origin python关闭进程

    Python/Linux quit() does not terminate PhantomJS process · Issue #767 · SeleniumHQ/selenium https:// ...

  6. ios状态栏的一些操作

    [UIApplication sharedApplication].networkActivityIndicatorVisible = YES; //显示 [UIApplication sharedA ...

  7. redis09---redis 服务器端命令

    redis 服务器端命令 db0,db1,db2是数据库,外层是服务器,服务器下面有20个数据库. :>time ) "" //多少秒 ) "" //多少 ...

  8. 织梦dedecms内页分类频道友情链接实现方法

    本文介绍了织梦dedecms中内页分类频道加友情链接的三种方法,有需要的朋友参考下. 织梦dedecms中内页分类频道加友情链接,方法有三种: 先讲方法,后讲原理: 方法:先找到首页模版index.h ...

  9. Oracle：不同数据库版本导致的Ora-00918问题

    今天有同事反映,一个sql在10.0.2.4下面执行是好的,在11.0.2.3报Ora-00918问题. sql语句如下: SELECT kcdm, bjdm, f.kszc, f.jszc FROM ...

  10. 格式化磁盘，提示 is apparently in use by the system

    一般是被mdadm占用着. 使用  cat /proc/mdstat 查看所有 找到欲格式化盘符号. 使用 mdadm --stop /dev/md0 mdadm --remove /dev/md0 ...