预览:
作用:常用于布局时内部元素尺寸不固定,但又想整体对齐时。
我们常常使用float:left;时会发生高度不一致导致下一行的排版错位。
使用text-justify布局可以解决这个问题,当然内部元素只能是inline-block或inline行内元素,不支持block块级元素。最后一行默认不会两端对齐,text-align-last:justify;会使最后一行也分布对齐。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
body, select, input, textarea {
color: #333333;
}
html{height:100%;}
body{
font-family:"微软雅黑"; line-height:22px; font-size:13px;
background:#FFF;
width:100%;height:100%; margin:0; padding:0;
}
img{border:0;}
.box{
width:80%; padding:20px; margin:20px auto; background-color:#f0f3f9;font-size: 0;
text-align:justify;text-justify:inter-ideograph;/*text-align-last:justify;*/
}
.list{
padding-bottom:0px; text-align:center;text-justify:center;text-align-last:center;background: #FFF;
/*inline-block 兼容解决方案*/
display: inline-block; *display: inline; *zoom:1; vertical-align: top;
font-size: 15px; word-spacing:normal; letter-spacing: normal; line-height: 1.6;
}
.list img{height: 300px;}
</style>
</head>
<body>
<div class="box">
<div class="list"><img src="https://cdn.pixabay.com/photo/2018/02/05/23/05/road-3133502__340.jpg"><br><span>公路</span></div>
<div class="list"><img src="https://cdn.pixabay.com/photo/2018/01/01/01/57/woman-3053492__340.jpg"><br>标题名</div>
<div class="list"><img src="https://cdn.pixabay.com/photo/2018/02/14/21/45/woman-3153999__340.jpg"><br><span style="font-size: 30px;">标题名2</span>标题名2标题名2</div>
<div class="list"><img src="https://cdn.pixabay.com/photo/2018/02/01/12/51/mammal-3123179__340.jpg"><br><br><br><span style="font-size: 30px;">超高度</span></div>
<div class="list"><img src="https://cdn.pixabay.com/photo/2018/05/04/10/30/team-3373638__340.jpg"></div>
<div class="list"><img src="https://cdn.pixabay.com/photo/2018/01/09/22/51/rose-3072698__340.jpg"></div>
<div class="list"><img src="https://cdn.pixabay.com/photo/2018/02/05/23/05/road-3133502__340.jpg">公路</div>
<div class="list"><img src="https://cdn.pixabay.com/photo/2018/01/01/01/57/woman-3053492__340.jpg">标题名</div>
<div class="list"><img src="https://cdn.pixabay.com/photo/2018/02/14/21/45/woman-3153999__340.jpg"><br>标题名2标题名2标题名2</div>
<div class="list"><img src="https://cdn.pixabay.com/photo/2018/02/01/12/51/mammal-3123179__340.jpg"></div>
<div class="list"><img src="https://cdn.pixabay.com/photo/2018/05/04/10/30/team-3373638__340.jpg"></div>
<div class="list"><img src="https://cdn.pixabay.com/photo/2018/01/09/22/51/rose-3072698__340.jpg"></div>
</div>
</body>
</html>