css三列一列宽度自适应效果
分类:实例代码
分享一段代码实例,它实现了三列效果。
并且可以实现列的宽度自适应效果,自己调整窗口的尺寸查看效果。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> .box { width: 700px; margin: 0 auto; border: 1px solid; overflow: hidden; } .box-left { width: 220px; background: red; height: 300px; float: left; } .box-middle { margin-left: 220px; margin-right: 150px; } .box-right { width: 150px; float: right; height: 300px; background: #ccc; } </style> </head> <body> <div class="box"> <div class="box-left"></div> <div class="box-right"></div> <div class="box-middle"></div> </div> </body> </html>