说到两端对齐，大家并不陌生，在word、powerpoint、outlook等界面导航处，其实都有一个两端对齐(分散对齐)的按钮，平时使用的也不多，我们更习惯与左对齐、居中对齐、右对齐的方式来对齐页面的文本或模块。
响应式网页设计出现以来，更多是使用百分比布自适应布局，特别是在移动端，两端对齐的方式显得越来越重要。那么，如何使用css实现两端对齐，相信很多同学会文本对齐的text-align:justify，这是今天要讲的其中一种方式，另外还有两种更精彩的实现方式，请往下看~
下图是需要实现的demo，取了宽度分别为320px、480px、640px下的截图，也就是说再随浏览器窗口宽度的调整，按钮菜单高度不变，宽度会按比例自动适应，且左右两端对齐：
目录（更新于）
方法一：使用text-align:justify
感谢join同学提供的方案，使用该方案可以做到兼容所有的浏览器，不过实现起来会比较复杂，而且带有hack的味道
text-align:justify 属性是全兼容的，使用它实现两端对齐，需要注意在模块之间添加[空格/换行符/制表符]才能起作用，同样，实现文本对齐也是需要在字与字之间添加[空格/换行符/制表符]才能起作用
&p&模块内的元素之间为&分隔，只支持webkit和Gecko内核浏览器&/p&
&div class="demo"&&a class="link" href="#none"&10元&/a&&&a class="link" href="#none"&20元&/a&&&a class="link" href="#none"&30元&/a&&&a class="link" href="#none"&50元&/a&
&p&模块内的元素之间为换行符&/p&
&div class="demo"&
&a class="link" href="#none"&10元&/a&
&a class="link" href="#none"&20元&/a&
&a class="link" href="#none"&30元&/a&
&a class="link" href="#none"&50元&/a&
&p&模块内的元素之间为空格符&/p&
&div class="demo"&
&a class="link" href="#none"&10元&/a& &a class="link" href="#none"&20元&/a& &a class="link" href="#none"&30元&/a& &a class="link" href="#none"&50元&/a&
&p&模块内的元素之间为无分隔符，justify不起作用&/p&
&div class="demo"&&a class="link" href="#none"&选项1&/a&&a class="link" href="#none"&选项2&/a&&a class="link" href="#none"&选项3&/a&&a class="link" href="#none"&选项4&/a&&/div&
*{margin:0;padding:0;}
说明： 1.IE中要实现块内单行两端对齐需要使用其私有属性text-align-last:justify配合，text-align-last 要生效，必须先定义text-align 为justify
2.line-height:0 解决标准浏览器容器底部多余的空白
text-align:justify;
text-align-last:justify;
line-height:0;
height:44px;
模块使用[换行符]或[空格符]后，webkit浏览器中会引起最后一个模块有多余空白，使用font-size:0可清除该空格
@media all and (-webkit-min-device-pixel-ratio:0){
font-size:0;
1.text-align-last:justify 目前只有IE支持，标准浏览器需要使用 .demo:after 伪类模拟类似效果
2.opera浏览器需要添加 vertical-align:top 才能完全解决底部多余的空白
.demo:after{
display:inline-block;
overflow:hidden;
width: &a class="link" href="#none"&10元&/a&
&a class="link" href="#none"&20元&/a&
&a class="link" href="#none"&30元&/a&
&a class="link" href="#none"&50元&/a&
*{margin:0;padding:0;}
display:box定义布局为盒模型后，可使用盒模型下的box-pack:justify属性
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-box-pack:justify;
-webkit-justify-content:space-between;
-ms-flex-pack:justify;
justify-content:space-between;
width:20%;
display:block;
height:44px;
line-height:44px;
text-align:center;
border:1px solid #428cc8;
color:#666;
font-size:16px;
margin-bottom:5px;
border-radius:3px;
background-color:#fefefe;
background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fefefe),color-stop(1,#eee));
color:#666;
text-decoration:none;
测试地址：
方法三：使用column(多列布局)
column也是是css3的属性，意思是多列布局，使用column来实现两端对齐也十分简单，只需要设置模块的个数跟column的列数一致即可，不过它的自动适应方式跟使用box-pack还有有点差别，并不是很标准，像列与列的间距暂无法定义为百分比。值得高兴的是目前支持所有高级浏览器，对IE10的支持也良好，而IE9及以下版本不支持，webapp开发中，对于不需要兼容winphone7手机(IE9)的需求来说，可以充分发挥column的强大作用~
关于column的使用方法，w3school的有相关教程：
&div class="demo"&
&a class="link" href="#none"&10元&/a&
&a class="link" href="#none"&20元&/a&
&a class="link" href="#none"&30元&/a&
&a class="link" href="#none"&50元&/a&
*{margin:0;padding:0;}
1.column-count定义了对象的列数,例子中有4个模块，那么定义为4列
2.column-gap定义了对象中列与列的间距，间距不能设置为百分比，显得不够灵活
-webkit-column-count:4;-moz-column-count:4;column-count:4;
-webkit-column-gap:20px;-moz-column-gap:20px;column-gap:20px;
display:block;
height:44px;
line-height:44px;
text-align:center;
border:1px solid #428cc8;
color:#666;
font-size:16px;
margin-bottom:5px;
border-radius:3px;
background-color:#fefefe;
background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fefefe),color-stop(1,#eee));
color:#666;
text-decoration:none;
测试地址：
移动端文本两端对齐示例
text-justify示例（补充于：）
justify-content:space-between示例（补充于：）
林小志大神的解决方案（补充于：）
以上3种实现方式各有优缺点，具体看实际项目使用，如果大家有更好的实现方式，欢迎留言探讨~
阅读(...) 评论()
朋友同事同行相关资源：
尾行3***后玩不了怎么解决?不少玩家***尾行3后出现了玩不了或者打不开的情况，怎么解决呢?下面小编就告诉大家尾行3***后打不开或者运行不了的解决方法，赶紧来看看吧!传奇最经典网页版，多人团战跨服竞技玩法冰火战场，十年最经典游戏，英雄合击，3D特效绚丽，赶紧注册试玩一下，
&&==&&解决方法：方法一下载我们网站的汉化硬盘版，解压就可以玩（已亲自测试）尾行3汉化硬盘版：方法二先把CD1 单独解压到一个单独的文件夹(硬盘一定要够大因为一会还要汉化呢)在把CD2 也解压到这个文件夹中 解压过程中回询问文件是否要覆盖 全部选是这样就回有一个尾行3的***文件了~然后就是解压汉化文件开始汉化后什么也不要动免的死机或是产生错误 ~~汉化完直接找到你刚才创建的尾行3中会有一个 尾行3中文版~~双击就可以了～如果还是玩不了那就在找个盘从新装.尾行3***方法：尾行3去马赛克补丁：
《潜行者3》相关文章
(阅读:49146)
(阅读:27238)
(阅读:11016)
(阅读:83057)
(阅读:19912)
(阅读:7808)
(阅读:106891)
(阅读:36104)
(阅读:16032)
(阅读:27395)
近日，游戏圈最高人气的UP主敖厂长微博发布了一组图片，盛赞参与极限游戏开发的少年们：“有想法、有内涵“，还表示自己”生不逢时”。而微博提及的“游戏极限开发“，指的是腾讯NEXT IDEA高校游戏创意制作大赛系列活动之一，72小时游戏制作夏令营现场。现场来自全国各地的数十名大学生分为不同小组，在72小时内进行封闭式头脑风暴和游戏开发，最终制作出一款可玩的游戏DEMO并展示。
??7月25日，《饭局的诱惑》节目官方正版授权、腾讯首款狼人杀APP《饭局狼人杀》全量上线，所有玩家都可前往微信、手Q、应用宝、腾讯视频及各大应用商店下载。和朋友异地连麦，随时开局，相爱相杀就在《饭局狼人杀》。更值得期待的是，7月26日至28日期间，还有马东携众葩们在游戏里上演陪玩活动，和喜爱的明星一起偶遇吧！《饭局狼人杀》开饭了！腾讯合作版今日上线腾讯代理《饭局狼人杀》 7.25开饭了7月12 ...
扫描二维码尾x_尾行3_尾x下载
时间: 01:24
来源:互联网
浏览:581次
【优酷视频】妖尾X圣石OAD PV
07 妖尾x圣石小子 JPG - 371x236 - 174k
歪扎麻花辫子发尾x松散长卷发 JPG - 350x495 - 36k
妖尾x圣石oad pv JPG - 448x252 - 31k
妖精的尾巴 妖尾x七原罪四格 第2页 JPG - 900x1331 - 257k
妖尾x幻神 妖精的尾巴 JPG - 200x150 - 9k
妖精的尾巴 妖尾x七原罪四格 第6页 JPG - 900x1293 - 284k
mad妖尾x幻神 JPG - 200x150 - 11k
x镜尾 JPG - 533x800 - 50k
定制题材 进击的巨人 乱斗堂 重磅定制 巨人x妖尾x神... JPG - 500x375 - 34k
紫心实木前臂,6插,x牙色板,x牙大轮,双尾x牙先角JPG - 972x547 - 157k