【css段落强制两段对齐】浅谈三种CSS技术——的两端对齐

在有很多出内文字的网页上，用于对齐文字的两端对齐、两端对齐方法有三种：

1.使用文本-align : justify

text-align 3360 justify属性完全兼容，必须使用它来实现两端对齐，并在模块之间添加[空格/换行符/制表符]，才能正常工作。同样，为了对齐文本，必须在单词和单词之间添加“空格/换行符/制表符”

/*

说明：

1.在IE中，要实现块中单行的两端对齐，必须使用个人属性text-align-last:justify对齐。要应用text-align-last，必须先将text-align定义为justify。

2.解决line-height33600标准浏览器容器底部不必要的空格

*/

.content{

文本-align : justify；

text-align text-align-last 3360 justify；

Line-Height :0；

海特：44px

}

/*

说明：

在模块中使用“换行”或“空格字符”可能会在WebKit浏览器中的最后一个模块中产生多馀的空格，使用font-size 33600将清除空格。

*/

@ media all and(-WebKit-min-device-pixel-ratio :0){

.content{

font-size :0；

}

}

/*

说明：

1.text-1 . text-align-last : justify目前仅在IE中受支持，在标准浏览器中。必须使用demo:after相似类模拟类似的效果

2 .要完全解决opera浏览器中底部不必要的空格，必须添加vertical-align 3360 top

*/

.content:after{

display : inline-block；

Overflow:hidden

width :100%；

海特：0；

内容： ' '

vertical-align 3360 top；

}

子类必须是inline-block元素

-银

2.使用box-pack 3360 justify

父类容器css:

.content{

display :-WebKit-box；

Display:-webkit-flex:

Display:-ms-flexbox:

display : flex:

-WebKit-box-pack : justify；

-WebKit-justify-content :空间-between；

-ms-flex-ms-flex-pack : justify；

Justify-content 3360空间-between；

}

子类必须是block元素

-银

3.使用列(多栏布局)

/*

说明：

1.column-count定义对象中的列数

2.column-gap定义对象的列和列之间的间距

*/

父类容器css:

.content {

-WebKit-column-count 3360 2；

-moz-column-count : 4；

column-count : 4；

-web kit-column-gap : 20 px；

-moz-column-gap : 20 px；

column-gap : 20 px；

}

子类必须是block元素

文/丁向明

成为有博客的web前端媒体人，专注于web前端开发，专注于用户体验，加上qq/微信通信：6135833