单列变双列css_css 两列布局中单列定宽单列自适应布局的6种思路
前面的话
说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式。本文将从float、inline-block、table、absolute、flex和grid这六种思路来详细说明如何巧妙地实现布局
float
【思路一】float
说起两列布局,最常见的就是使用float来实现。float浮动布局的缺点是浮动后会造成文本环绕等效果,以及需要及时清除浮动。如果各浮动元素的高度不同时,可能会出犬牙交错的效果
【1】float + margin
将定宽的一列使用float,而自适应的一列使用计算后的margin
p{margin: 0;}
.parent{overflow: hidden;zoom: 1;}
.left{float: left;width: 100px;}
.right{margin-left: 120px;}
left
right
right
[缺点1]IE6-浏览器下3像素bug,具体表现在右侧首行文字会向右偏移3px。解决办法是在left元素上设置margin-right: -100px
[缺点2]当右侧容器中有元素清除浮动时,会使该元素不与左侧浮动元素同行,从而出现文字下沉现象
【2】float + margin + (fix)
(fix)代表增加结构,为了解决上述方法中的两个缺点,可以通过增加结构来实现。自适应的一列外侧增加一层结构.rightWrap并设置浮动。要实现自适应效果,.rightWrap宽度必须设置为100%。若不设置,float后的元素宽度将由内容撑开。同时再配合盒模型属性的计算,设置计算后的负margin值,使两列元素在同一行显示。同时两列之间的间距由.right的margin值确定。由于右侧元素会层叠在左侧元素之上,.left需要使用relative来提升层级
p{margin: 0;}
.parent{overflow: hidden;zoom: 1;}
.left{position: relative;float: left;width: 100px;}
.rightWrap{float: left;width: 100%;margin-left: -100px;}
.right{margin-left: 120px;}
left
right
right
【3】float + margin + calc
除了增加结构的方法外,还可以使用calc()
[注意]IE8-、android4.3-、IOS5.1-不支持,android4.4+只支持加减运算
p{margin: 0;}
.parent{overflow: hidden;zoom: 1;}
.left{float: left;width: 100px;margin-right: 20px;}
.right{float: left;width: calc(100% - 120px);}
left
right
right
【4】float + overflow
还可以使用overflow属性来触发bfc,来阻止浮动造成的文字环绕效果。由于使用overflow不会改变元素的宽度属性,所以不需要重新设置宽度。由于设置overflow:hidden并不会触发IE6-浏览器的haslayout属性,所以需要设置zoom:1来兼容IE6-浏览器
p{margin: 0;}
.parent{overflow: hidden;zoom: 1;}
.left{ float: left;width: 100px;margin-right: 20px;}
.right{overflow: hidden;zoom: 1;}
left
right
right
inline-block
【思路二】inline-block
inline-block内联块布局的主要缺点是需要设置垂直对齐方式vertical-align,则需要处理换行符解析成空格的间隙问题。IE7-浏览器不支持给块级元素设置inline-block属性,兼容代码是display:inline;zoom:1;
【1】inline-block + margin + calc
一般来说,要解决inline-block元素之间的间隙问题,要在父级设置font-size为0,然后在子元素中将font-size设置为默认大小
[注意]IE8-、android4.3-、IOS5.1-不支持,android4.4+只支持加减运算
p{margin: 0;}
.parent{font-size: 0;}
.left{display:inline-block;vertical-align:top;width:100px;margin-right:20px;font-size:16px;}
.right{display:inline-block;vertical-align:top;width:calc(100% - 120px);font-size:16px;}
left
right
right
【2】inline-block + margin + (fix)
p{margin: 0;}
.parent{font-size: 0;}
.left{position:relative;display:inline-block;vertical-align:top;width:100px;font-size:16px;}
.rightWrap{display:inline-block;vertical-align:top;width:100%;margin-left: -100px;font-size:16px;}
.right{margin-left: 120px;}
left
right
right
table
【思路三】table
使用table布局的缺点是元素被设置为table后,内容撑开宽度,所以需要设置width:100%。若要兼容IE7-浏览器,需要改为
p{margin: 0;}
.parent{display:table;width: 100%;table-layout: fixed;}
.left,.rightWrap{display:table-cell;}
.left{width: 100px;}
.right{margin-left: 20px;}
left
right
right
absolute
【思路四】absolute
absolute布局的缺点是由于父元素需要设置为relative,且子元素设置为absolute,所以父元素的高度并不是由子元素撑开的,需要单独设置。
[注意]IE6-不支持相对的偏移属性同时设置
p{margin: 0;}
.parent{position: relative;width:100%;height:40px;}
.left{position: absolute;left:0;width:100px;}
.right{position: absolute;left:120px;right:0;}
left
right
right
flex
【思路五】flex
flex弹性盒模型是非常强大的布局方式。但由于其性能消耗较大,适合于局部小范围的布局
[注意]IE9-浏览器不支持
p{margin: 0;}
.parent{display: flex;}
.left{width:100px;margin-right: 20px;}
.right{flex:1;}
left
right
right
grid
【思路六】: 使用栅格布局grid实现
[注意]IE10-浏览器不支持
p{margin: 0;}
.parent{display: grid;grid-template-columns: 100px 1fr;grid-gap:20px}
left
right
right
单列变双列css_css 两列布局中单列定宽单列自适应布局的6种思路相关推荐
- 两栏布局之右定宽左自适应,上定高下自适应,下定高上自适应
这三种布局其实都是大同小异,今天就全部总结成一篇文章. 1.右定宽左自适应 <!DOCTYPE html> <html lang="en"> <hea ...
- 任意列+左右两列等高布局,并要求有最小高度
高度相等列在Web页面设计中永远是一个网页设计师的需求.如果所有列都有相同的背景色,高度相等还是不相等都无关紧要,因为你只要在这些列的父元素中设置一个背景色就可以了.但是,如果一个或多个列需要单独设置 ...
- python如何输出两列数据_Python-如何将一列分为两列?
小编典典 对于以下简单情况: 我有一个带有定界符的文本列,我想要两列 最简单的解决方案是: df['A'], df['B'] = df['AB'].str.split(' ', 1).str 或者,你 ...
- 【excel】根据两个表中指定列合并两个表中相同的内容。
说明: 场景: 存在两个excel 表格,其中的表头字段分别如下: 表格1(Sheet1):姓名 | 班级 | 年龄 表格2(Sheet2):姓名 | 成绩 | 性别 实现: 根据表格1中的姓名列作为 ...
- css宽高自适应布局,实现Sticky Footer的三种布局方式
宽度自适应布局: 1.使用场景: 一侧(左侧或者右侧)为固定的导航或者菜单栏,另一侧将会随着浏览器的缩放而自适应改变其大小.这种布局结构可用于顶层布局结构亦可用于某个局部功能块,常见于各种web系统( ...
- 求两个链表的第一个公共结点各种情况及三种思路分析
转自:http://blog.csdn.net/ssopp24/article/details/72377184 1.寻找两个链表的第一个公共结//这道题可以有很多种思路, 我们按照, 有坏到好的顺序 ...
- min-aspect-ratio和max-aspect-ratio宽高比自适应布局
首先,移动端的适配,还是要先做好的,不管你是使用rem布局,还是使用media进行适配布局(只是单纯的宽度上),布局好了,这里只是宽度自适应了,如果是流式布局的话,这样就已经足够了,对于我们这里的单屏 ...
- CSS(一) 经典布局(两边固定,中间自适应)的五种方式
两边固定,中间自适应 本篇总结五种思路实现方式, 圣杯布局 圣杯布局,方便理解是带有两只耳朵的奖杯,耳朵跟奖杯是一体,所以左右两边跟中间同级,但是content在上面 第一步:中间盒子100%,两边固 ...
- 再谈布局,栅栏式自适应布局的学习和实现(calc自适应布局)
布局真的很重要.一个不好的布局后期会有很多很多的bug,就像是建房子的地基一样. 首先,再一次地圣杯布局的学习,来源于该教程: http://www.jianshu.com/p/f9bcddb0e8b ...
最新文章
- 基于STC8G1K08的实验电路板
- 【Kotlin】Kotlin Sealed 密封类 ( 密封类声明 | 密封类子类定义 | 密封类特点 | 代码示例 )
- 2021-04-17 深入理解SLAM技术 【3】 数学基础概述
- 六、爬虫中重要的解析库xpath和BeautifulSoup
- matchers依赖_Hamcrest Matchers,Guava谓词和Builder设计模式
- mac 电脑连接不上github_Mac版爱思助手【手机投屏直播】工具使用教程
- 第二章:循环结构程序设计
- PHP 获取微信小程序接口B二维码接口
- 基于MC1496乘法器的AM信号调制
- 医疗器材行业如何利用三类医疗器械进销存软件
- 研究方法、技术路线、实验手段、关键技术区别和联系
- PS-fiveday-快速选择和魔棒工具(快速抠图)
- Blender几个简单建模
- QT动态加载DLL包括加载DLL中的类及其成员函数
- 笔记丨元胞自动机模拟城市扩张过程
- 有关Bert模型的理解
- 教培企业女神节线上营销方案怎么做好?
- 面向对象的C++了解
- 桌面应用程序脚本录制
- Xilinx 7系FPGA总览
热门文章
- mysql mtop_mysqlmtop2.2运行出错
- 网络:常见的端口号及分类
- nanotime java 博客园_System.nanoTime (计时工具类)
- JVM自动内存管理机制——Java内存区域(下)
- Almost Arithmetic Progression
- 【Mysql】之视图操作
- C/C++中的声明与定义
- [Deep Learning]任意层cnn的matlab版本实现
- crawler_java_数据平台结构
- oracle table 函数使用