中间宽度自适应的三列布局代码实例
分类:实例代码
分享一段代码实例,它实现了三列布局效果。
并且中间可以实现宽度自适应,感兴趣的朋友可以做一下参考。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style type="text/css"> html, body { margin: 0; height: 100%; } #main { height: 100%; margin: 0 210px; background: #ffe6b8; } #left, #right { width: 200px; height: 100%; background: #a0b3d6; } #left { float: left; } #right { float: right; } </style> </head> <body> <div id="left"></div> <div id="right"></div> <div id="main"></div> </body> </html>
中间宽度自适应的三列布局代码实例,这样的场景在实际项目中还是用的比较多的,关于中间宽度自适应的三列布局代码实例就介绍到这了。
中间宽度自适应的三列布局代码实例属于前端实例代码,有关更多实例代码大家可以查看。