<!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. OpenStack源码系列---neutron-server

    在看过了nova模块的源码之后,再去看OpenStack其它模块的源码会轻松很多,因为框架也是大同小异的.自四月份开通博客写了几篇文章后,真心觉得写篇技术文章如果要把前前后后牵扯到的其它技术内容都做介 ...

  2. BingMap地图怎样显示中文

    这是bingMap的js引用 <script type="text/javascript" src="v=7.0&mkt=zh-cn'></sc ...

  3. js弹出QQ对话框在线交谈

    <div style="position:absolute; top:110px; right:220px; z-index:2;"> <a target=&qu ...

  4. CentOS笔记-常用网络命令

    1.curl & wget 使用curl或wget命令,不用离开终端就可以下载文件.如你用curl,键入curl -O后面跟一个文件路径.wget则不需要任何选项.下载的文件在当前目录. cu ...

  5. [a,s]=[22,3]

    [a,s]=[22,3] Object.assign() - JavaScript | MDN https://developer.mozilla.org/en-US/docs/Web/JavaScr ...

  6. GPG key

    Creating GPG Keys - Fedora Project Wiki https://fedoraproject.org/wiki/Creating_GPG_Keys

  7. OO的片段，继承与组合，继承的优点与目的，虚机制在构造函数中不工作

    摘自C++编程思想: ------------------------------ 继承与组合:接口的重用 ------------------------------- 继承和组合都允许由已存在的类 ...

  8. 【翻译自mos文章】即使resource_limit = false， password的 资源限制也会生效

    即使resource_limit = false, password的 资源限制也会生效 參考原文: Resource limits for passwords work even with reso ...

  9. extjs 4 checkboxgroup Panel的简单用法

    Ext.require([ 'Ext.tree.*', 'Ext.data.*', 'Ext.window.MessageBox', 'Ext.tip.*' ]); Ext.onReady(funct ...

  10. 概率dp集合

    bzoj1076 你正在玩你最喜欢的电子游戏,并且刚刚进入一个奖励关.在这个奖励关里,系统将依次随机抛出k次宝物,每次你都可以选择吃或者不吃(必须在抛出下一个宝物之前做出选择,且现在决定不吃的宝物以后 ...