两端对齐布局与text-align:justify
生活随笔
收集整理的這篇文章主要介紹了
两端对齐布局与text-align:justify
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
百分比實現(xiàn)
首先最簡單的是使用百分比實現(xiàn)，如下一個展示列表：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 .list{ 8 width: 100%; 9 background: #f0f0f9; 10 list-style: none; 11 font-size: 0; /* 去掉邊框的影響 */ 12 } 13 .img{ 14 display: inline-block; 15 width: 30%; 16 height: 60px; 17 margin-right: 5%; 18 border: 1px solid lightblue; 19 box-sizing: border-box; /* 削去border邊框?qū)挾鹊挠绊?*/ 20 text-align: center; 21 } 22 </style> 23 </head> 24 <body> 25 <div class="box"> 26 <ul class="list"> 27 <li class="img"><img src="img/HBuilder.png" alt="" /></li> 28 <li class="img"><img src="img/HBuilder.png" alt="" /></li> 29 <li class="img" style="margin-right: 0;"><img src="img/HBuilder.png" alt="" /></li> 30 </ul> 31 </div> 32 </body> 33 </html>效果：
這樣當(dāng)然很簡單，而且也不會存在什么兼容性問題，但是其他問題還有很多：
定寬的列表，效果很難實現(xiàn)
如果內(nèi)部img元素寬度不是100%且需要實現(xiàn)兩端對齊，效果很難實現(xiàn)
如果列表項數(shù)量是動態(tài)的，效果不能實現(xiàn)
?
flex實現(xiàn)
第二種實現(xiàn)方式就比較先進(jìn)了，除了需要學(xué)習(xí)flex相關(guān)知識，使用還是很簡單的，實現(xiàn)兩端對齊效果，關(guān)鍵點是在flex容器上使用justify-content屬性，并將其值設(shè)為space-between;
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 .list{ 8 display: -moz-box; 9 display: -webkit-box; 10 display: -webkit-flex; 11 display: -moz-flex; 12 display: -ms-flexbox; 13 display: -ms-flex; 14 display: flex; 15 -webkit-box-pack: justify; 16 -moz-box-pack: justify; 17 -ms-flex-pack: justify; 18 -webkit-justify-content: space-between; 19 -moz-justify-content: space-between; 20 -ms-justify-content: space-between; 21 justify-content: space-between; display: flex; 22 justify-content: space-between; 23 } 24 .img{ 25 display: block; 26 } 27 </style> 28 </head> 29 <body> 30 <div class="box"> 31 <ul class="list"> 32 <li class="img"><img src="img/HBuilder.png" alt="" /></li> 33 <li class="img"><img src="img/HBuilder.png" alt="" /></li> 34 <li class="img" style="margin-right: 0;"><img src="img/HBuilder.png" alt="" /></li> 35 </ul> 36 </div> 37 </body> 38 </html>text-align:justify實現(xiàn)
另外一種要介紹的是使用text-align:justyle;實現(xiàn)方式。
我們知道text-align:justify;效果是實現(xiàn)文字兩端對齊,如。
轉(zhuǎn)載于:https://www.cnblogs.com/h5monkey/p/5937423.html
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎總結(jié)
以上是生活随笔為你收集整理的两端对齐布局与text-align:justify的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 结对项目——最大子数组
- 下一篇： Scala IDE for Eclips