当前位置：Gxlcms > css > 弹性盒子中间自适应如何设置（代码教程）

弹性盒子中间自适应如何设置（代码教程）

时间：2021-07-01 10:21:17 帮助过：46人阅读

本篇文章给大家带来的内容是关于弹性盒子中间自适应如何设置（代码教程），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

微信截图_20181019151059.png

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>弹性盒子中间自适应</title>
  6. <style>
  7. /*
  8. 父级添加
  9. display:-webkit-box;
  10. display:-moz-box;
  11. 子级添加
  12. box-flex:1;
  13. -webkit-box-flex:1;
  14. -moz-box-flex:1;
  15. 定义子容器占的比例, 具体计算规则,父容器-定宽,剩余的按比例等分。
  16. 但实际计算中并没有实现等分(子容器中还有元素时),常用的解决方法是,
  17. 数字 1 为所占的份数
  18. 添加宽度百分比和box-sizing: border-box;（解决border和padding问题）
  19. */
  20. #wrap{
  21. width:100%;
  22. margin:0 auto;
  23. background: #ccc;
  24. display:-webkit-box;
  25. display:-moz-box;
  26. }
  27. #left{
  28. width:100px;
  29. padding:10px;
  30. background:#09F;
  31. }
  32. #content{
  33. /*width:400px;*/
  34. padding:10px;
  35. background:#30C;
  36. box-flex:1;
  37. -webkit-box-flex:1;
  38. -moz-box-flex:1;
  39. }
  40. #right{
  41. /*width:100px;*/
  42. padding:10px;
  43. background:#F0F;
  44. box-flex:1;
  45. -webkit-box-flex:1;
  46. -moz-box-flex:1;
  47. }
  48. #left,#content,#right{
  49. box-sizing:border-box;
  50. -webkit-box-sizing:border-box;
  51. -moz-box-sizing:border-box;
  52. }
  53. </style>
  54. </head>
  55. <body>
  56. <p id="wrap">
  57. <p id="left">#f00</p>
  58. <p id="content">#0f0</p>
  59. <p id="right">#00F</p>
  60. </p>
  61. </body>
  62. </html>

以上就是对弹性盒子中间自适应如何设置（代码教程）的全部介绍，如果您想了解更多有关CSS视频教程，请关注PHP中文网。

以上就是弹性盒子中间自适应如何设置（代码教程）的详细内容，更多请关注Gxl网其它相关文章！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！