双栏布局
双栏布局非常常见,往往是以一个定宽栏和一个自适应的栏并排展示存在
浮动布局
实现思路也非常的简单:
- 使用 float 左浮左边栏
- 右边模块使用 margin-left 撑出内容块做内容展示
- 为父级元素添加BFC,防止上方内容飞到下方元素
代码效果
没有使用bfc
使用了bfc
代码
<!DOCTYPE html> <html lang="en"> <head> <title>Document</title> <style> .box { overflow: hidden;/* 父级元素添加BFC */ } .left { float: left; width: 200px; background-color: gray; height: 400px; } .right { margin-left: 210px; background-color: lightgray; height: 200px; } </style> </head> <body> <div class="box"> <div class="left"> 左边左边左边左边左边左边左边左边左边左边左边左边左边左左边左边左边左边左左边左边左边左边左左边左边左边左边左左边左边左边左边左左边左边左.......... </div> <div class="right"> 右边右边右边右边右边右边右边右边右边右边右边右边边右边右边右边右右边右边右边右边右边右边右边右边边右边右边右边右右边右边右边右.......... </div> </div> </body> </html>
flex布局
代码效果
代码
<style> .box { display: flex; } .left { width: 200px; background-color: gray; } .right { background-color: lightgray; flex: 1; } </style> <div class="box"> <div class="left">左边左边左边左边左边左边左边左边左边左边</div> <div class="right">右边右边右边右边右边右边右边右边右边</div> </div>
三栏布局
两边float中间margin
代码效果
代码
关键代码
<style> .wrap { background: #eee; overflow: hidden; padding: 20px; height: 200px; } .left { width: 200px; height: 200px; float: left; background: coral; } .right { width: 120px; height: 200px; float: right; background: lightblue; } .middle { margin-left: 220px; height: 200px; background: lightpink; margin-right: 140px; } </style> <div class="wrap"> <div class="left">左侧</div> <div class="right">右侧</div> <div class="middle">中间</div> </div>
flex布局
代码效果
代码
<style type="text/css"> .wrap { display: flex; justify-content: space-between; } .left, .right, .middle { height: 100px; } .left { width: 200px; background: coral; } .right { width: 120px; background: lightblue; } .middle { background: #555; width: 100%; margin: 0 20px; } </style> <div class="wrap"> <div class="left">左侧</div> <div class="middle">中间</div> <div class="right">右侧</div> </div>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!