分享一段代码实例,它演示了多列等宽分布效果。
代码实例如下:
<!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自定义滚动条效果简单实现代码