css两端对齐[编辑]
概述
CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计。是目前基于文本展示最优秀的表现设计语言。
一、关于CSS 语言与两端对齐技术
css
层叠样式表是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。
两端对齐技术
说到两端对齐，大家并不陌生，在word、powERPoint、outlook等界面导航处，其实都有一个两端对齐(分散对齐)的按钮，平时使用的也不多，我们更习惯与左对齐、居中对齐、右对齐的方式来对齐页面的文本或模块。
响应式网页设计出现以来，更多是使用百分比布自适应布局，特别是在移动端，两端对齐的方式显得越来越重要。
二、CSS如何实现两端对齐
方法一：使用text-align:justify
text-align:justify 属性是全兼容的，使用它实现两端对齐，需要注意在模块之间添加[空格/换行符/制表符]才能起作用，同样，实现文本对齐也是需要在字与字之间添加[空格/换行符/制表符]才能起作用。
方法二：使用box-pack:justify
box-pack是css3的新属性，依赖于display:box(旧版弹性布局)，受box-orient影响，box-pack决定了子标签水平对齐的方式，可选值有start | end | center | justify。使用box-pack:justify来实现两端对齐非常简单，代码量也少。为了向前看齐，把display:flex(新版弹性布局)也一起写进去。
如果是做基于webkit内核的webapp开发和winphone IE10及以上，那么一切都好办。
方法三：使用column(多列布局)
column也是是css3的属性，意思是多列布局，使用column来实现两端对齐也十分简单，只需要设置模块的个数跟column的列数一致即可，不过它的自动适应方式跟使用box-pack还有有点差别，并不是很标准，像列与列的间距暂无法定义为百分比。值得高兴的是目前支持所有高级浏览器，对IE10的支持也良好，而IE9及以下版本不支持，webapp开发中，对于不需要兼容winphone7手机(IE9)的需求来说，可以充分发挥column的强大作用。
参考资料： CSS-百度百科 /link?url=DLF3vnOYQ3xHnAXSf9a54roZF4K8djazmmNqZDCvJJPGVyiF8Zlqoo11wRGoA9hG4uTiIrRfzOb2Lork_qaoI_sq5pPSOAi1exd4KKpLw-O
css实现两端对齐的3种方法 作者：白树
/
w3school的有相关教程/css3/css3_multiple_columns.asp
CSS box-flex属性，然后弹性盒子模型简介/wordpress/?p=1338
扩展阅读：
合作编辑：
分享到：
更多
网络营销词典内容均由网友提供，仅供参考。如发现词条内容有问题，请发邮件至info # 。
