页面布局:三栏布局,假设高度已知,左右宽度固定为300px,中间自适应。
来源:互联网 发布:腾讯tim ubuntu 编辑:程序博客网 时间:2024/05/22 08:00
1.使用浮动布局
优点:兼容性比较好。
缺点:浮动后,元素是脱离文档流的,需要谨慎处理好清除浮动还有浮动的元素和周边元素之间的关系
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>页面布局</title> <style> * { margin: 0; padding: 0; } .layout{ margin: 20px; } .layout article div{ min-height: 100px; } </style></head><body> <!-- 浮动解决方案 --> <section class="layout float"> <style> .layout.float .left{ float: left; width: 300px; background: red; } .layout.float .right{ float: right; width: 300px; background: blue; } .layout.float .center{ background: yellow; } </style> <article class="left-right-center"> <div class="left"></div> <div class="right"></div> <div class="center"> <h1>浮动解决方案</h1> 1.这是三栏布局中间部分 1.这是三栏布局中间部分 </div> </article> </section></body></html>注意:最要注意的一点是,中间列一定要放在左右两列的后面!!!
2.使用绝对定位布局
优点:布局相对迅速
缺点:定位的元素脱离了文档流,意味着其子元素也要脱离文档流,所以这种方式的可使用性比较差
优点:布局相对迅速
缺点:定位的元素脱离了文档流,意味着其子元素也要脱离文档流,所以这种方式的可使用性比较差
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>页面布局</title> <style> * { margin: 0; padding: 0; } .layout{ margin: 20px; } .layout article div{ min-height: 100px; } </style></head><body><!-- 绝对定位解决方案 --> <section class="layout absolute"> <style> .layout.absolute .left-right-center{ position: relative; } .layout.absolute .left{ position: absolute; left: 0; width: 300px; background: red; } .layout.absolute .right{ position: absolute; right: 0; width: 300px; background: blue; } .layout.absolute .center{ position: absolute; left: 300px; right: 300px; background: yellow; } </style> <article class="left-right-center"> <div class="left"></div> <div class="center"> <h2>绝对定位解决方案</h2> 1.这是三栏布局绝对定位解决方案 1.这是三栏布局绝对定位解决方案 </div> <div class="right"></div> </article> </section></body></html>
3.使用flex布局
优点: 很好的解决了浮动和绝对定位的缺点,现在移动端基本都是用flex布局
ie8以下 不支持flex
ie8以下 不支持flex
<section class="layout flex"> <style> .layout.flex .left-right-center{ display: flex; margin-top: 140px; } .layout.flex .left{ flex: 0 0 300px; width: 300px; background: red; } .layout.flex .right{ flex: 0 0 300px; width: 300px; background: blue; } .layout.flex .center{ flex: 1; background: yellow; } </style> <article class="left-right-center"> <div class="left"></div> <div class="center"> <h2>Flexbox解决方案</h2> 1.这是三栏布局flexbox解决方案 1.这是三栏布局flexbox解决方 </div> <div class="right"></div> </article> </section>
注意: 中间列要放在中间!!!
4.使用表格布局
优点:兼容性还不错
缺点:其中一栏内容高度增加,另外两栏的高度也会增加,有时我们并不需要他们同时增高;不利于搜索引擎抓取信息;
优点:兼容性还不错
缺点:其中一栏内容高度增加,另外两栏的高度也会增加,有时我们并不需要他们同时增高;不利于搜索引擎抓取信息;
<!-- 表格布局解决方案 --><section class="layout table"><style>.layout.table .left-right-center{width: 100%;display: table;height: 100px;}.layout.table .left{display: table-cell;width: 300px;background: red;}.layout.table .right{display: table-cell;width: 300px;background: blue;}.layout.table .center{display: table-cell;background: yellow;}</style><article class="left-right-center"><div class="left"></div><div class="center"><h2>表格布局解决方案</h2>1.这是三栏布局表格布局解决方案1.这是三栏布局表格布局解决方案</div><div class="right"></div></article></section>
5.网格布局
<!-- 网格布局解决方案 --><section class="layout grid"><style>.layout.grid .left-right-center{width: 100%;display: grid;grid-template-rows: 100px;grid-template-columns: 300px auto 300px;}.layout.grid .left{background: red;}.layout.grid .right{background: blue;}.layout.grid .center{background: yellow;}</style><article class="left-right-center"><div class="left"></div><div class="center"><h2>网格布局解决方案</h2>1.这是三栏布局网格布局解决方案1.这是三栏布局网格布局解决方案</div><div class="right"></div></article></section>
假如把高度已知去掉或者高度超出
1.flex布局高度可以自适应
2.表格布局奥杜可以自适应
3.浮动,绝对定位,网格布局不能自适应高度
1.flex布局高度可以自适应
2.表格布局奥杜可以自适应
3.浮动,绝对定位,网格布局不能自适应高度
阅读全文
0 0
- 页面布局:三栏布局,假设高度已知,左右宽度固定为300px,中间自适应。
- 三栏自适应布局实现(左右固定宽度,中间自适应)
- 三栏布局:左右固定,中间自适应
- 三列布局(左右固定宽度,中间自适应)
- 三列布局-左右固定,中间自适应
- CSS实现左右栏宽度固定中间栏宽度变化且各栏高度自适应背景色不同的三栏布局
- 三栏布局,中间自适应,左右固定实现方法
- 三栏布局——左右固定,中间自适应
- html--三栏布局(两边固定宽度,中间自适应)
- 淘宝双飞翼布局,左右固定中间自适应宽度。
- 三列布局(左右宽度固定,中间自适应)的五种解决方案
- 【CSS】三列布局(左右div固定宽度,中间div随浏览器窗口自适应变化宽度)
- CSS-两侧固定宽度,中间自适应的三列布局
- CSS布局:中栏固定宽度,左右两栏宽度自适应
- 使用CSS实现三栏自适应布局(两边宽度固定,中间自适应)
- 使用CSS实现三栏自适应布局(两边宽度固定,中间自适应)
- 3列布局左右自适应中间固定
- 网页布局,左右固定,中间自适应
- std:map与迭代器简析
- Netty心跳检测篇之IdleStateHandler
- tensorflow使用中遇到的问题
- Spring_5 声明式事物
- Meclipse设置默认编码为UTF-8
- 页面布局:三栏布局,假设高度已知,左右宽度固定为300px,中间自适应。
- 解决方案集X1
- TF-IDF 加权及其应用
- android 64位机子兼容32位so包的操作
- java21个知识点重点
- 安卓开发-多线程常规实现+xUtils-master开源框架实现 断点下载
- 树状数组学习
- md5($str,true)注入
- SSH框架之spring整合javamail实现邮件服务