<!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. （转） Universal-Image-Loader使用大全（史上最屌）

    转载自http://blog.csdn.net/zenjj11/article/details/38728481 项目介绍: Android上最让人头疼的莫过于从网络获取图片.显示.回收,不论什么一个 ...

  2. C++ 模板应用浅析

    把曾经写的C++模板的应用心得发表出来. 回忆起当时在学习C++模板时的无助和恐惧,如今还心有余悸.我分享出来我的心得,仅仅希望别人少走弯路,事实上它就这么几种使用方法,不须要害怕. 我总结了模板的四 ...

  3. mongo 原理 Replica Set Oplog

    [客户的写请求全部发送至主节点] Primary. The primary receives all write operations. Secondaries. Secondaries replic ...

  4. Android Studio解决导入项目非常慢

    Android Studio比Eclipse ADT有巨大的优势.Android Studio原生支持使用Gradle来构建项目,使用动态语言Groovy定义项目构建的过程,避免了build.xml文 ...

  5. MySQL 权限生效

    用GRANT.REVOKE或SET PASSWORD对授权表施行的修改会立即被服务器注意到. 如果你手工地修改授权表(使用INSERT.UPDATE等等),你应该执行一个FLUSH PRIVILEGE ...

  6. 细说align 的作用及用法

    .align 就是用来对齐的,究竟怎么对齐,有啥情况?下面分析一下 基本情况讲解 (一) $vim align1.s 在新建的文件编辑以下代码: 1 2 3 4 5 6 _start: b reset ...

  7. include <ctype.h> 头文件包含函数总结

    里面包含的函数主要是: 1.字符测试函数,函数原型一般为:int isXXXX( int ); 参数为int, 只能正确处理[0, 127]. 2.字符映射函数,函数原型一般为:int toXXXX( ...

  8. YTU 2421: C语言习题 矩形法求定积分

    2421: C语言习题 矩形法求定积分 时间限制: 1 Sec  内存限制: 128 MB 提交: 354  解决: 234 题目描述 写一个用矩形法求定积分的通用函数,分别求 (说明: sin,co ...

  9. codevs矩阵乘法系列

    T1:矩阵乘法板子题,练手. #include <map> #include <set> #include <cmath> #include <ctime&g ...

  10. 第一次往github上传文件步骤

    第一次往github上传文件步骤: 1> 从右上角 '+' 位置下拉菜单中,创建一个repository 2>从右上角头像位置下拉菜单 setting中设置 SSH keys 3>打 ...