分享一段代码实例，它演示了多列等宽分布效果。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style>
.container {
width: 400px;
margin: 50px auto 0;
}
.justify {
position: relative;
width: 100%;
height: 24px;
text-align: justify;
margin-bottom: 20px;
}
.justify i {
width: 24px;
line-height: 24px;
display: inline-block;
text-align: center;
background: #333;
color: white;
border-radius: 50%;
overflow: hidden;
font-style: normal;
}
.justify:after {
content: "";
}
.justify:after,
.justify b {
display: inline-block;
position: relative;
top: -28px;
*top: -9px;
height: 1px;
line-height: 0;
width: 100%;
background: #333;
z-index: -1;
*zoom: 1;
}
</style>
</head>
<body>
<div class="container">
<div class="justify">
<i>1</i>
<i>2</i>
<i>3</i>
<i>4</i>
<i>5</i>
</div>
<div class="justify">
<i>1</i>
<i>2</i>
<i>3</i>
<i>4</i>
</div>
<div class="justify">
<i>1</i>
<i>2</i>
<i>3</i>
</div>
<div class="justify">
<i>1</i>
<i>2</i>
</div>
<div class="justify">
<i>1</i>
</div>
</div>
</body>
</html>
css多列等宽分布代码实例，这样的场景在实际项目中还是用的比较多的，关于css多列等宽分布代码实例就介绍到这了。
css多列等宽分布代码实例属于前端实例代码，有关更多实例代码大家可以查看。
本文地址： http://www.zzsi.net/code/web/98442.html
本站部分资源来源与网络，仅供学习参考使用，请勿商用，如侵犯了您的权益，请联系我们删除。
上一篇: ReactNative实现图片上传功能的示例代码
下一篇: JS自定义滚动条效果简单实现代码
