弹性盒子中间自适应如何设置(代码教程)
本篇文章给大家带来的内容是关于弹性盒子中间自适应如何设置(代码教程),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>弹性盒子中间自适应</title> <style> /* 父级添加 display:-webkit-box; display:-moz-box; 子级添加 box-flex:1; -webkit-box-flex:1; -moz-box-flex:1; 定义子容器占的比例, 具体计算规则,父容器-定宽,剩余的按比例等分。 但实际计算中并没有实现等分(子容器中还有元素时),常用的解决方法是, 数字 1 为所占的份数 添加宽度百分比和box-sizing: border-box;(解决border和padding问题) */ #wrap{ width:100%; margin:0 auto; background: #ccc; display:-webkit-box; display:-moz-box; } #left{ width:100px; padding:10px; background:#09F; } #content{ /*width:400px;*/ padding:10px; background:#30C; box-flex:1; -webkit-box-flex:1; -moz-box-flex:1; } #right{ /*width:100px;*/ padding:10px; background:#F0F; box-flex:1; -webkit-box-flex:1; -moz-box-flex:1; } #left,#content,#right{ box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; } </style> </head> <body> <p id="wrap"> <p id="left">#f00</p> <p id="content">#0f0</p> <p id="right">#00F</p> </p> </body> </html>
以上就是对弹性盒子中间自适应如何设置(代码教程)的全部介绍,如果您想了解更多有关CSS视频教程,请关注PHP中文网。
以上就是弹性盒子中间自适应如何设置(代码教程)的详细内容,更多请关注其它相关文章!