页面布局(三栏布局)
题目: 假设高度已知,左右宽度各位300px,中间自适应
方案一: 浮动解决方案
优点:浏览器兼容性比较好
缺点:需要清除浮动(脱离了文档流)
代码如下:
<style> html *{ padding: 0; margin: 0; } .layout>div{ min-height: 100px; } .left{ float: left; width: 300px; background-color: red; } .right{ float: right; width: 300px; background-color: green; } .center{ min-height: 100px; margin: 0 300px; background-color: yellow; } </style> <!--浮动布局--> <section class="layout"> <div class="left"></div> <div class="right"></div> <div class="center"> <h2>float布局方案</h2> 1.float布局 中间内容 2.float布局 中间内容 </div> </section>
方案二: 绝对定位解决方案
优点:浏览器兼容性好
缺点:脱离了文档流,可使用性差
代码如下:
<style> html *{ padding: 0; margin: 0; } .layout>div{ position: absolute; min-height: 100px; } .left{ left: 0; width: 300px; background-color: red; } .right{ right: 0; width: 300px; background-color: green; } .center{ left: 300px; right: 300px; background-color: yellow; } </style> <!--绝对定位布局--> <section class="layout"> <div class="left"></div> <div class="center"> <h2>绝对定位解决方案</h2> 1.绝对定位布局 中间内容 2.绝对定位布局 中间内容 </div> <div class="right"></div> </section>
方案三:flexbox解决方案(优先选择的方案)
优点:css3 为了解决上面两种方案的不足出现的,移动端都用flex布局
缺点:一些浏览器还不支持
代码如下:
<style> html *{ padding: 0; margin: 0; } .layout{ display: -webkit-flex; display: flex; } .layout>div{ min-height: 100px; } .left{ width: 300px; background-color: red; } .right{ width: 300px; background-color: green; } .center{ -webkit-flex:1; flex: 1; background-color: yellow; } </style> <!--flexbox布局--> <section class="layout"> <div class="left"></div> <div class="center"> <h2>flexbox解决方案</h2> 1.flexbox布局 中间内容 2.flexbox布局 中间内容 </div> <div class="right"></div> </section>
方案四:表格布局方案
优点: 浏览器的兼容性比较好
代码如下:
<style> html *{ padding: 0; margin: 0; } .layout{ display:table; width: 100%; min-height: 100px; } .layout>div{ display: table-cell; } .left{ width: 300px; background-color: red; } .right{ width: 300px; background-color: green; } .center{ background-color: yellow; } </style> <!--表格布局--> <section class="layout"> <div class="left"></div> <div class="center"> <h2>table解决方案</h2> 1.表格布局 中间内容 2.表格布局 中间内容 </div> <div class="right"></div> </section>
方案五:网格布局(grid)
优点:网格布局是新出的属性,是一个新的技术。可以通过很简单的代码就可实现复杂的布局
缺点:只有一些主浏览器支持
代码如下:
<style> html *{ padding: 0; margin: 0; } .layout{ display:grid; grid-template-columns: 300px auto 300px; } .layout>div{ min-height: 100px; } .left{ background-color: red; } .right{ background-color: green; } .center{ background-color: yellow; } </style> <!--网格布局--> <section class="layout"> <div class="left"></div> <div class="center"> <h2>网格布局解决方案</h2> 1.网格布局 中间内容 2.网格布局 中间内容 </div> <div class="right"></div> </section>
这个题目中的高度是已知的,如果高度不固定,随着内容的增多而增加时。前两个方案就不可以了。后三个方案仍是可以的
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 25岁的心里话
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 零经验选手,Compose 一天开发一款小游戏!
· 一起来玩mcp_server_sqlite,让AI帮你做增删改查!!