响应式布局和自适应布局的不同(浅析两列自适应布局的3种思路)
类别:Web前端 浏览量:1311
时间:2021-11-05 14:10:32 响应式布局和自适应布局的不同
浅析两列自适应布局的3种思路前面已经介绍过单列定宽单列自适应的两列布局,而两列自适应布局是指一列由内容撑开,另一列撑满剩余宽度的布局方式。本文将从float、table和flex来介绍两列自适应布局的3种思路。
思路一: float
在单列定宽单列自适应的两列布局中,经常用float和负margin配合实现布局效果。但由于margin取值只能是固定值,所以在两列都是自适应的布局中就不再适用。而float和overflow配合可实现两列自适应效果。使用overflow属性来触发bfc,来阻止浮动造成的文字环绕效果。由于设置overflow:hidden并不会触发IE6-浏览器的haslayout属性,所以需要设置zoom:1来兼容IE6-浏览器
- <style>
- p{margin: 0;}
- .parent{overflow: hidden;zoom: 1;}
- .left{float: left;margin-right: 20px;}
- .rightright{overflow: hidden;zoom: 1;}
- </style>
- <li class="parent" style="background-color: lightgrey;">
- <li class="left" style="background-color: lightblue;">
- <p>left</p>
- </li>
- <li class="right" style="background-color: lightgreen;">
- <p>right</p>
- <p>right</p>
- </li>
- </li>
思路二: table
若table元素不设置table-layout:fixed,则宽度由内容撑开。在某个table-cell元素的外层嵌套一层li,并设置足够小的宽度如width:0.1%
- <style>
- p{margin: 0;}
- .parent{display:table;width:100%;}
- .leftWrap{display:table-cell;width:0.1%;}
- .left{margin-right: 20px;}
- .rightright{display:table-cell;}
- </style>
- <li class="parent" style="background-color: lightgrey;">
- <li class="leftWrap" style="background-color: pink;">
- <li class="left" style="background-color: lightblue;">
- <p>left</p>
- </li>
- </li>
- <li class="right" style="background-color: lightgreen;">
- <p>right</p>
- <p>right</p>
- </li>
- </li>
思路三: flex
flex弹性盒模型是非常强大的布局方式。基本上,一般的布局方式都可以实现
[注意]IE9-不支持
- <style>
- p{margin: 0;}
- .parent{display:flex;}
- .rightright{margin-left:20px; flex:1;}
- </style>
- <li class="parent" style="background-color: lightgrey;">
- <li class="left" style="background-color: lightblue;">
- <p>left</p>
- </li>
- <li class="right" style="background-color: lightgreen;">
- <p>right</p>
- <p>right</p>
- </li>
- </li>
以上这篇浅析两列自适应布局的3种思路就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持开心学习网。
原文地址:http://www.cnblogs.com/xiaohuochai/archive/2016/05/03/5454232.html
您可能感兴趣
- 响应式布局和自适应布局的不同(浅析两列自适应布局的3种思路)
- divcss页面布局步骤(横向两列布局左列固定,右列自适应的4种CSS实现方式)
- sql两列内容合并(分组字符合并SQL语句 按某字段合并字符串之一简单合并)
- css如何两列布局(浅谈CSS 多栏布局Multi-Columns Layout)
- sql两列合并成一列格式(SQL 将一列拆分成多列的三种方法)
- python怎么用pandas读取两列数据(python 利用pandas将arff文件转csv文件的方法)
- html一行两列布局代码(CSS实现页面两列布局与三列布局的方法示例)
- sql两列数据快速对比(在sql中对两列数据进行运算作为新的列操作)
- 高考数学题(高考数学题基础题占多少分)
- 没钱只能吃土(没钱要吃土了幽默短信发朋友圈)
- 今年考高会很难吗(今年高考会考试吗)
- 盘古开天地 他创造了世界,谁创造了盘古 盘古是伏羲吗(盘古开天地他创造了世界)
- 关于队徽 你了解这些么 二(关于队徽你了解这些么)
- 冬天来了手脚冰凉 真不是因为上辈子你是折翼的天使(冬天来了手脚冰凉)
热门推荐
- docker和容器有什么区别(聊聊docker中容器与镜像的区别)
- html 设置canvas的背景图可缩放(浅析canvas元素的html尺寸和css尺寸对元素视觉的影响)
- 使用canvas画个正方形(canvas小画板之平滑曲线的实现)
- 如何用阿里云绑定域名(阿里云域名和ip绑定步骤方法实现)
- python中的多线程详解(python多线程抽象编程模型详解)
- apache中配置虚拟主机的作用(apache基于端口创建虚拟主机的示例)
- docker部署redis集群查看版本(docker下的 redis 之持久化存储详解)
- jquery导航栏动画(jQuery实现带展开动画的导航栏效果)
- C#中Serializable序列化
- mysql索引建立及应用(MYSQL创建索引,这些知识应该了解)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8