<!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. @SuppressWarnings 用法

    从Java 5.0起,您可以使用java.lang.SuppressWarning注释,来停用与编译单元子集相关的编译警告 作用:用于抑制编译器产生警告信息. Idea 设置泛型检查,变量.方法未使用 ...

  2. 4. 基本TCP套接字编程

    基本函数接口 socket函数 #include <sys/socket.h> int socket(int family, int type, int protocol); 成功时返回一 ...

  3. HDU 6073 Matching In Multiplication dfs遍历环 + 拓扑

    Matching In Multiplication Problem DescriptionIn the mathematical discipline of graph theory, a bipa ...

  4. Spring中的AOP（学习笔记）

    是什么AOP及实现方式 AOP的基本概念 Schema-base AOP Spring AOP API AspectJ

  5. Dom解析XMl文档

    XMl文档 <?xml version = "1.0" encoding = "UTF-8"?> <books> <book bo ...

  6. ajax异步加载问题

    使用ajax异步加载数据,在之后需要用到这个数据时,应该将之后的js一并写入ajax函数中,否则后面的js不能找到动态拼接的dom节点. 或者将其封装成方法,在ajax动态加载数据的最后调用该方法.

  7. React中Transition的作用

    /** * `Transaction` creates a black box that is able to wrap any method such that * certain invarian ...

  8. string interpolation in sql server

    https://sqlserver.dev129.com/2018/01/29/string-interpolation-in-t-sql/ Most programming languages ha ...

  9. 应用程序启动器 “sublime_text.desktop“ 还没有被标记为 信任。如果您不知道这个文件的来源，那么启动它可能会不安全。解决sublime在ubuntu中不支持中文输入问题。

    1.下载 git clone https://github.com/lyfeyaj/sublime-text-imfix.git 2.进行一些处理 cd ~/sublime-text-imfix su ...

  10. 纯CSS画WP8界面

    我的手机是诺基亚920,13年4月份买的.工作之余,就想用css做一下WP8的界面效果,如上图所示.不做不知道,一做还挺难的.尤其是画那个QQ 的企鹅图标,太难画了.怎么画都不像. <!doct ...