淺談3種css技巧——兩端對齊

1、淺談3種css技巧兩端對齊在出里文字比較多的網(wǎng)頁，文字對齊其中采納的兩端對齊，兩端對齊的辦法有三種辦法，如下：1. 用法text-align:justifytext-align:justify 屬性是全兼容的，用法它實現(xiàn)兩端對齊，需要注重在模塊之間添加空格/換行符/制表符才干起作用，同樣，實現(xiàn)文本對齊也是需要在字與字之間添加空格/換行符/制表符才干起作用/*解釋：1.ie中要實現(xiàn)塊內(nèi)單行兩端對齊需要用法其私有屬性text-align-last:justify協(xié)作，text-align-last 要生效，必需先定義text-align 為justify2.line-height:0 解決標(biāo)準(zhǔn)掃瞄

2、器容器底部多余的空白*/.contenttext-align:justify;text-align-last:justify;line-height:0;height:44px;/*解釋：模塊用法換行符或空格符后，webkit掃瞄器中會引起最后一個模塊有多余空白，用法font-size:0可清除該空格*/media all and (-webkit-min-device-pixel-ratio:0).contentfont-size:0;/*解釋：1.text-align-last:justify 目前惟獨ie支持，標(biāo)準(zhǔn)掃瞄器需要用法 .demo:after 偽類模擬類似效果2.opera掃瞄

3、器需要添加 vertical-align:top 才干徹低解決底部多余的空白*/.content:afterdisplay:inline-block;overflow:hidden;width:100%;height:0;content:''vertical-align:top;且子類必需是inline-block元素-2. 用法box-pack:justify父類容器css:.contentdisplay:-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;且子類必需是block元素-3. 用法column(多列布局)/*解釋：1.column-count定義了對象的列數(shù)2.column-gap定義了對象中列與列的間距*/父類容器css:.content -webkit-column-count: 2;-moz-column-count: 4;column-count: 4;-webkit-column-gap: 20px;-m