施用text-justify 和 display:inline-block;实现两端对齐的解决方案 _Web前端

使用text-justify 和 display:inline-block;实现两端对齐的解决方案

display:inline-block列表布局

必要条件：

1：现代浏览器下的首尾标签留空或换行

像这样：

<span>
??? <a href="#">
??????? <img src="test.jpg" />
??? </a>
?</span> <span>
??? <a href="#">
??????? <img src="test.jpg" />
??? </a>
?</span>?

2：IE6/7浏览器

inline标签化
所谓“inline标签化”就是列表元素需要使用inline水平的标签，例如span, a, strong, em等，像li, div这些标签就不可以。

结束标签连续化
所谓“结束标签连续化”是指列表元素及其内部标签的结束标签需要连在一起。应该是这个样子滴：

<span>
    <a href="#">
        <img src="test.jpg" />
    </a>
    <span>描述</span></span>

注意：如果列表标签内嵌多层，则所有层级的结束标签都要连续。

总结如下：

各个浏览器实现text-align:justify下的两端对齐布局注意事项表
IE6 inline水平列表标签、列表结束标签连续、列表元素间换行或留空
IE7 inline水平列表标签、列表结束标签连续、列表元素间换行或留空
IE8 列表元素间换行或留空、列表元素的环境字体大小不能为0
现代浏览器列表元素间换行或留空

然后样式这样设置，外层元素的样式：text-align:justify;列表元素的样式：display:inline-block;

以下是demo：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>text-jusyify下的inline-block自适应列表布局末行对齐修复</title>
<link rel="stylesheet" href="../css/demo.css" type="text/css" />
<link rel="stylesheet" href="../css/hl.css" type="text/css" />
<style>
* {
?font-size:12px;
}
.box {
?width:50%;
?padding:20px;
?margin:0 auto;
?background-color:#f0f3f9;
?text-align:justify;
}
.list {
?width:120px;
?display:inline-block;
?padding-bottom:20px;
?text-align:center;
?vertical-align:top;
}
.justify_fix {
?display:inline-block;
?width:100%;
?height:0;
?overflow:hidden;
}
</style>
</head>
<body>
<div id="main">
? <div id="body" class="light">
??? <div id="content" class="show">
????? <div class="demo">
??????? <div class="box"> <span class="list"><img src="image/study/s/s128/mm9.jpg" /><br />
????????? 哇哦，美女，口水，鼻血~~~</span> <span class="list"><img src="image/study/s/s128/mm9.jpg" /><br />
????????? 哇哦，美女，口水，鼻~~</span> <span class="list"><img src="image/study/s/s128/mm9.jpg" /><br />
????????? 哇哦，美女，口水，鼻血~~~</span> <span class="list"><img src="image/study/s/s128/mm9.jpg" /><br />
????????? 哇哦，美女，口水，鼻血~~~</span> <span class="list"><img src="image/study/s/s128/mm9.jpg" /><br />
????????? 哇哦，美女，口水，鼻血~~~</span> <span class="list"><img src="image/study/s/s128/mm9.jpg" /><br />
????????? 哇哦，美女，口水，鼻血~~~</span> <span class="list"><img src="image/study/s/s128/mm9.jpg" /><br />
????????? 哇哦，美女，口水，鼻血~~~</span> <span class="list"><img src="image/study/s/s128/mm9.jpg" /><br />
????????? 哇哦，美女，口水，鼻血~~~</span> <span class="list"><img src="image/study/s/s128/mm9.jpg" /><br />
????????? 哇哦，美女，口水，鼻血~~~</span> <span class="list"><img src="image/study/s/s128/mm9.jpg" /><br />
????????? 哇哦，美女，口水，鼻血~~~</span> <span class="list"><img src="image/study/s/s128/mm9.jpg" /><br />
????????? 哇哦，美女，口水，鼻血~~~</span> <span class="list"><img src="image/study/s/s128/mm9.jpg" /><br />
????????? 哇哦，美女，口水，鼻血~~~</span> <span class="list"><img src="image/study/s/s128/mm9.jpg" /><br />
????????? 哇哦，美女，口水，鼻血~~~</span> <span class="justify_fix"></span> </div>
????? </div>
??? </div>
? </div>
</div>
</body>
</html>