html百分比布局缩放自适应
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html百分比布局缩放自适应相关的知识，希望对你有一定的参考价值。
参考技术A 1.左侧固定右侧自适应-定位 步骤:左侧宽度写死——》定位——》给父元素设置左padding即可
右侧宽度不用设置(自适应)
2.浮动+触发BFC 拓展:想详细了解BFC戳这里 overflow:hidden 会触发盒子的BFC 触发BFC的盒子的特点: 解决margin的塌陷 清除浮动 ... 参考技术B html根蒂构造代码之百分比自适应组织居中的网页模板成本。
最外层DIV宽度采取百分比值完成构造居中而长久适应
页面布局方案-左定宽，右自适应左右百分比
左右百分比
两列布局， 左右为百分比，高度自适应。
效果：
代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>左侧固定，右侧自适应</title> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <style type="text/css"> 7 html,body{ 8 margin:0; 9 height: 100%; 10 } 11 .cui_layout_container{ 12 height:100%; 13 } 14 .float_left{float:left;} 15 .cui_layout_container .right_side,.cui_layout_container .left_side{ 16 height: 100%; 17 overflow: auto; 18 } 19 .cui_layout_container .left_side{ 20 width:40%; /*左侧宽度*/ 21 background-color:#ff7d20; 22 } 23 .cui_layout_container .right_side{ 24 background-color:#FFE69F; 25 width:60%; /*右侧宽度*/ 26 } 27 </style> 28 </head> 29 <body> 30 31 <div class="cui_layout_container"> 32 33 <div class="left_side float_left"> 34 左侧40% 35 </div> 36 <div class="right_side float_left"> 37 右侧60% 38 </div> 39 40 </div> 41 42 43 </body> 44 </html>
以上是关于html百分比布局缩放自适应的主要内容，如果未能解决你的问题，请参考以下文章