两端对齐布局与text-align:justify
生活随笔
收集整理的這篇文章主要介紹了
两端对齐布局与text-align:justify
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
百分比實(shí)現(xiàn)
首先最簡(jiǎn)單的是使用百分比實(shí)現(xiàn)，如下一個(gè)展示列表：
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)然很簡(jiǎn)單，而且也不會(huì)存在什么兼容性問題，但是其他問題還有很多：
定寬的列表，效果很難實(shí)現(xiàn)
如果內(nèi)部img元素寬度不是100%且需要實(shí)現(xiàn)兩端對(duì)齊，效果很難實(shí)現(xiàn)
如果列表項(xiàng)數(shù)量是動(dòng)態(tài)的，效果不能實(shí)現(xiàn)
?
flex實(shí)現(xiàn)
第二種實(shí)現(xiàn)方式就比較先進(jìn)了，除了需要學(xué)習(xí)flex相關(guān)知識(shí)，使用還是很簡(jiǎn)單的，實(shí)現(xiàn)兩端對(duì)齊效果，關(guān)鍵點(diǎ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實(shí)現(xiàn)
另外一種要介紹的是使用text-align:justyle;實(shí)現(xiàn)方式。
我們知道text-align:justify;效果是實(shí)現(xiàn)文字兩端對(duì)齊,如。
轉(zhuǎn)載于:https://www.cnblogs.com/h5monkey/p/5937423.html
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)總結(jié)
以上是生活随笔為你收集整理的两端对齐布局与text-align:justify的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 结对项目——最大子数组
- 下一篇： Scala IDE for Eclips