css多列等宽分布代码实例
分类:实例代码
分享一段代码实例,它演示了多列等宽分布效果。
代码实例如下:
<!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多列等宽分布代码实例属于前端实例代码,有关更多实例代码大家可以查看。