兼容ie6/ie7的inline-block元素的两端对齐布局
inline-block元素的两端对齐在图文列表布局、瀑布流布局中有着广阔的应用空间。不过ie6、ie7下的兼容性一直是个硬伤。下面尝试用ie专有属性text-justify和一些css hack兼容ie6/7。
css代码
| 代码如下 |
复制代码 |
|
ul {
list-style: none;
width: 100%;
}
li {
width: 140px;
margin-bottom: 10px;
padding: 10px;
text-align: center;
background: #ECC;
}
.text-justify {
text-align: justify;
*text-justify:inter-ideograph; /*IE私有属性*/
}
.justify {
vertical-align: top;
display: inline-block;
*display:inline;
*zoom:1;
}
.justify-last {
width: 100%;
height: 0;
padding: 0;
overflow: hidden;
}
|
html代码
| 代码如下 |
复制代码 |
|
<ul class="text-justify">
<li class="justify"><a href="javascript:;"><img src="./images/s1.jpg"/><br>
<span>just for test</span></a></li>
<li class="justify"><a href="javascript:;"><img src="./images/s1.jpg"/><br>
<span>just for test just for test</span></a></li>
<!--此处省略若干行-->
<li class="justify"><a href="javascript:;"><img src="./images/s1.jpg"/><br>
<span>just for test</span></a></li>
<!--插入此行用以解决最后一行无法两端对齐的问题-->
<li class="justify justify-last"></li>
</ul>
|
实例
| 代码如下 |
复制代码 |
|
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>兼容ie6/ie7的inline-block元素的两端对齐布局</title>
<link rel="stylesheet" type="text/css" href="style/base.css" />
<style>
.box {
width: 60%;
height: 100%;
overflow: hidden;
margin: 20px auto;
text-align: justify;
background: #EEE;
}
ul {
list-style: none;
width: 100%;
}
li {
width: 140px;
margin-bottom: 10px;
padding: 10px;
text-align: center;
background: #ECC;
}
.text-justify {
text-align: justify;
*text-justify:inter-ideograph;
}
.justify {
vertical-align: top;
display: inline-block;
*display:inline;
*zoom:1;
}
.justify-last {
width: 100%;
height: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div class="box">
<ul class="text-justify">
<li class="justify"><a href="javascript:;"><img src="./images/s1.jpg"/><br>
<span>just for test</span></a></li>
<li class="justify"><a href="javascript:;"><img src="./images/s1.jpg"/><br>
<span>just for test just for test test test just for test just for testtesttest</span></a></li>
<li class="justify"><a href="javascript:;"><img src="./images/s1.jpg"/><br>
<span>just for test</span></a></li>
<li class="justify"><a href="javascript:;"><img src="./images/s1.jpg"/><br>
<span>just for test just for test just for test</span></a></li>
<li class="justify"><a href="javascript:;"><img src="./images/s1.jpg"/><br>
<span>just for test just for test</span></a></li>
<li class="justify"><a href="javascript:;"><img src="./images/s1.jpg"/><br>
<span>just for test</span></a></li>
<li class="justify"><a href="javascript:;"><img src="./images/s1.jpg"/><br>
<span>just for test just for test</span></a></li>
<li class="justify"><a href="javascript:;"><img src="./images/s1.jpg"/><br>
<span>just for test</span></a></li>
<li class="justify justify-last"></li>
</ul>
</div>
</div>
</body>
</html>
|
补充：Css教程,高级应用
