两端对齐布局与text-align:justify
生活随笔
收集整理的這篇文章主要介紹了
两端对齐布局与text-align:justify
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
百分比實現
首先最簡單的是使用百分比實現，如下一個展示列表：
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邊框寬度的影響 */ 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>效果：
這樣當然很簡單，而且也不會存在什么兼容性問題，但是其他問題還有很多：
定寬的列表，效果很難實現
如果內部img元素寬度不是100%且需要實現兩端對齊，效果很難實現
如果列表項數量是動態的，效果不能實現
?
flex實現
第二種實現方式就比較先進了，除了需要學習flex相關知識，使用還是很簡單的，實現兩端對齊效果，關鍵點是在flex容器上使用justify-content屬性，并將其值設為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實現
另外一種要介紹的是使用text-align:justyle;實現方式。
我們知道text-align:justify;效果是實現文字兩端對齊,如。
轉載于:https://www.cnblogs.com/h5monkey/p/5937423.html
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的两端对齐布局与text-align:justify的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 结对项目——最大子数组
- 下一篇： 前端-html实现省份、地市、区县三级联