单列变双列css_css 两列布局中单列定宽单列自适应布局的6种思路

前面的话

说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式。本文将从float、inline-block、table、absolute、flex和grid这六种思路来详细说明如何巧妙地实现布局

float

【思路一】float

说起两列布局,最常见的就是使用float来实现。float浮动布局的缺点是浮动后会造成文本环绕等效果,以及需要及时清除浮动。如果各浮动元素的高度不同时,可能会出犬牙交错的效果

【1】float + margin

将定宽的一列使用float,而自适应的一列使用计算后的margin

48304ba5e6f9fe08f3fa1abda7d326ab.png

p{margin: 0;}

.parent{overflow: hidden;zoom: 1;}

.left{float: left;width: 100px;}

.right{margin-left: 120px;}

48304ba5e6f9fe08f3fa1abda7d326ab.png

48304ba5e6f9fe08f3fa1abda7d326ab.png

left

right

right

48304ba5e6f9fe08f3fa1abda7d326ab.png

36532d8810599c6e2cc6c9224d54acc5.png

[缺点1]IE6-浏览器下3像素bug,具体表现在右侧首行文字会向右偏移3px。解决办法是在left元素上设置margin-right: -100px

937194d80f572cab7682cb332a4e0431.gif

[缺点2]当右侧容器中有元素清除浮动时,会使该元素不与左侧浮动元素同行,从而出现文字下沉现象

cc7ee7ea86a51774bbc21025f3ad6b58.gif

【2】float + margin + (fix)

(fix)代表增加结构,为了解决上述方法中的两个缺点,可以通过增加结构来实现。自适应的一列外侧增加一层结构.rightWrap并设置浮动。要实现自适应效果,.rightWrap宽度必须设置为100%。若不设置,float后的元素宽度将由内容撑开。同时再配合盒模型属性的计算,设置计算后的负margin值,使两列元素在同一行显示。同时两列之间的间距由.right的margin值确定。由于右侧元素会层叠在左侧元素之上,.left需要使用relative来提升层级

48304ba5e6f9fe08f3fa1abda7d326ab.png

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;}

48304ba5e6f9fe08f3fa1abda7d326ab.png

48304ba5e6f9fe08f3fa1abda7d326ab.png

left

right

right

48304ba5e6f9fe08f3fa1abda7d326ab.png

80ff2949c712ffc4234fa8912657f91f.png

【3】float + margin + calc

除了增加结构的方法外,还可以使用calc()

[注意]IE8-、android4.3-、IOS5.1-不支持,android4.4+只支持加减运算

48304ba5e6f9fe08f3fa1abda7d326ab.png

p{margin: 0;}

.parent{overflow: hidden;zoom: 1;}

.left{float: left;width: 100px;margin-right: 20px;}

.right{float: left;width: calc(100% - 120px);}

48304ba5e6f9fe08f3fa1abda7d326ab.png

48304ba5e6f9fe08f3fa1abda7d326ab.png

left

right

right

48304ba5e6f9fe08f3fa1abda7d326ab.png

7c40e65e6eb51ea07b8523bf839e6edf.png

【4】float + overflow

还可以使用overflow属性来触发bfc,来阻止浮动造成的文字环绕效果。由于使用overflow不会改变元素的宽度属性,所以不需要重新设置宽度。由于设置overflow:hidden并不会触发IE6-浏览器的haslayout属性,所以需要设置zoom:1来兼容IE6-浏览器

48304ba5e6f9fe08f3fa1abda7d326ab.png

p{margin: 0;}

.parent{overflow: hidden;zoom: 1;}

.left{ float: left;width: 100px;margin-right: 20px;}

.right{overflow: hidden;zoom: 1;}

48304ba5e6f9fe08f3fa1abda7d326ab.png

48304ba5e6f9fe08f3fa1abda7d326ab.png

left

right

right

48304ba5e6f9fe08f3fa1abda7d326ab.png

5f1c85a2b74ad884b51d6073586e22d7.png

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+只支持加减运算

48304ba5e6f9fe08f3fa1abda7d326ab.png

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;}

48304ba5e6f9fe08f3fa1abda7d326ab.png

48304ba5e6f9fe08f3fa1abda7d326ab.png

left

right

right

48304ba5e6f9fe08f3fa1abda7d326ab.png

4acce45ffb9232d85b640887d139d3b4.png

【2】inline-block + margin + (fix)

48304ba5e6f9fe08f3fa1abda7d326ab.png

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;}

48304ba5e6f9fe08f3fa1abda7d326ab.png

48304ba5e6f9fe08f3fa1abda7d326ab.png

left

right

right

48304ba5e6f9fe08f3fa1abda7d326ab.png

385ba8e1b5181b35fe1095ad79a174e1.png

table

【思路三】table

使用table布局的缺点是元素被设置为table后,内容撑开宽度,所以需要设置width:100%。若要兼容IE7-浏览器,需要改为

48304ba5e6f9fe08f3fa1abda7d326ab.png

p{margin: 0;}

.parent{display:table;width: 100%;table-layout: fixed;}

.left,.rightWrap{display:table-cell;}

.left{width: 100px;}

.right{margin-left: 20px;}

48304ba5e6f9fe08f3fa1abda7d326ab.png

48304ba5e6f9fe08f3fa1abda7d326ab.png

left

right

right

48304ba5e6f9fe08f3fa1abda7d326ab.png

09a8aac6cfe06787bbbdfc7c3981fa89.png

absolute

【思路四】absolute

absolute布局的缺点是由于父元素需要设置为relative,且子元素设置为absolute,所以父元素的高度并不是由子元素撑开的,需要单独设置。

[注意]IE6-不支持相对的偏移属性同时设置

48304ba5e6f9fe08f3fa1abda7d326ab.png

p{margin: 0;}

.parent{position: relative;width:100%;height:40px;}

.left{position: absolute;left:0;width:100px;}

.right{position: absolute;left:120px;right:0;}

48304ba5e6f9fe08f3fa1abda7d326ab.png

48304ba5e6f9fe08f3fa1abda7d326ab.png

left

right

right

48304ba5e6f9fe08f3fa1abda7d326ab.png

9ce08d7a37c378913d309fe1ecded4a6.png

flex

【思路五】flex

flex弹性盒模型是非常强大的布局方式。但由于其性能消耗较大,适合于局部小范围的布局

[注意]IE9-浏览器不支持

48304ba5e6f9fe08f3fa1abda7d326ab.png

p{margin: 0;}

.parent{display: flex;}

.left{width:100px;margin-right: 20px;}

.right{flex:1;}

48304ba5e6f9fe08f3fa1abda7d326ab.png

48304ba5e6f9fe08f3fa1abda7d326ab.png

left

right

right

48304ba5e6f9fe08f3fa1abda7d326ab.png

1d24224a399c262637b95f6711069548.png

grid

【思路六】: 使用栅格布局grid实现

[注意]IE10-浏览器不支持

p{margin: 0;}

.parent{display: grid;grid-template-columns: 100px 1fr;grid-gap:20px}

48304ba5e6f9fe08f3fa1abda7d326ab.png

left

right

right

48304ba5e6f9fe08f3fa1abda7d326ab.png

7cc12ad5e822801144ab9bfc6a678adf.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/471644.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android中Activity启动模式

Android中Activity启动模式一共是四种,这里我写一下我对其的理解: 1.standard(默认) 2.singleTop,如果某个Activity设置了该属性,且当前Activity就是这个Activity,在界面中再次打开它的时候,不会…

fastapi 用户指南(路径参数、查询参数、请求体)

文章目录1. 第一步1.1 小结2. 路径参数2.1 顺序很重要2.2 预设值2.3 包含路径的路径参数3. 查询参数3.1 查询参数类型转换4. 请求体learn from https://fastapi.tiangolo.com/zh/tutorial/1. 第一步 pip install fastapi[all] from fastapi import FastAPI my_app FastAPI(…

mysql format row_MySQL之InnoDB存储引擎:Row Format行格式

MySQL下用的比较多、比较广的存储引擎就属InnoDB。这里我们来介绍下InnoDB存储引擎下数据记录的存储格式——Row Format行格式基本操作在MySQL中,所谓Row Format行格式是指数据记录(或者称之为行)在磁盘中的物理存储方式。具体地,对于InnoDB存储引擎而言…

DirectX API 编程起步 #01 项目设置

目录: DirectX API 编程起步 #02 窗口的诞生 DirectX API 编程起步 #02 创建3D世界 这里记录了我从零开始学习使用 DirectX API 的过程。 参考教程:rastertek -> DirectX 11 Tutorials 准备工作 1)首先我们要有一套能写代码的软件&#…

centos5.8安装mysql5.3_CentOS 5.8 64位 源码安装mysql5.5.28

全新以最小化包安装了64位的CentOS5.8系统mysql5.5数据库v5.5.28地址:http://cdn.mysql.com/Downloads/MySQL-5.5/mysql-5.5.28.tar.gzmysql从5.5版本开始,不再使用./configure编译,而是使用cmake编译器我的mysql目录配置如下:安装…

LeetCode 2016. 增量元素之间的最大差值

文章目录1. 题目2. 解题1. 题目 给你一个下标从 0 开始的整数数组 nums &#xff0c;该数组的大小为 n &#xff0c;请你计算 nums[j] - nums[i] 能求得的 最大差值 &#xff0c;其中 0 < i < j < n 且 nums[i] < nums[j] 。 返回 最大差值 。如果不存在满足要求…

LeetCode 2017. 网格游戏(前缀和)

文章目录1. 题目2. 解题1. 题目 给你一个下标从 0 开始的二维数组 grid &#xff0c;数组大小为 2 x n &#xff0c;其中 grid[r][c] 表示矩阵中 (r, c) 位置上的点数。 现在有两个机器人正在矩阵上参与一场游戏。 两个机器人初始位置都是 (0, 0) &#xff0c;目标位置是 (1,…

mysql ngram_MySQL ngram全文解析器

本教程将向您展示如何使用MySQL ngram全文解析器来支持中文&#xff0c;日文&#xff0c;韩文等表意语言的全文搜索。MySQL ngram全文解析器简介MySQL内置的全文解析器使用空格确定单词的开始和结束。当涉及汉语&#xff0c;日语或韩语等表意语言语言时&#xff0c;这是一个限制…

手机号、姓名、邮箱等合法性验证方法

//邮箱 (BOOL) validateEmail:(NSString *)email{NSString *emailRegex "\\w[a-zA-Z_]?\\.[a-zA-Z]{2,6}";NSPredicate *emailTest [NSPredicate predicateWithFormat:"SELF MATCHES %", emailRegex];return [emailTest evaluateWithObject:email];}//…

zabbix设置mysql登陆免报警_zabbix3.0 监控mysql服务免用户名密码登录的有关问题故障处理详细过程_mysql...

zabbix3.0 监控mysql服务免用户名密码登录的问题故障处理详细过程1&#xff0c;My.cnf中用户名密码无效在azure云上面&#xff0c;使用Zabbix监控mysql中&#xff0c;发现在/usr/local/mysql/my.cnf里面设置的默认用户名密码无效&#xff0c;出不来数据&#xff0c;而且在zabbi…

LeetCode 2018. 判断单词是否能放入填字游戏内(模拟)

文章目录1. 题目2. 解题1. 题目 给你一个 m x n 的矩阵 board &#xff0c;它代表一个填字游戏 当前 的状态。 填字游戏格子中包含小写英文字母&#xff08;已填入的单词&#xff09;&#xff0c;表示 空格 的 和表示 障碍 格子的 # 。 如果满足以下条件&#xff0c;那么我…

链表的相关操作

#include<iostream> using namespace std; struct node {int data;node *next; }; //链表的建立&#xff0c;创建有n个结点的链表 node *create(int n) {node *headNULL;node *pNULL;headnew node();phead;cin>>p->data;node *q;while(--n){qnew node();cin>…

qt优点

&#xff08;1&#xff09;优良的跨平台特性。   Qt支持下列操作系统&#xff1a;Microsoft Windows 95/98、Microsoft Windows NT、Linux、Solaris、SunOS、HP&#xff0d;UX、Digital UNIX &#xff08;OSF/1、Tru64&#xff09;、Irix、FreeBSD、BSD/OS、SCO、AIX、OS390和…

LeetCode 2022. 将一维数组转变成二维数组

文章目录1. 题目2. 解题1. 题目 给你一个下标从 0 开始的一维整数数组 original 和两个整数 m 和 n 。 你需要使用 original 中 所有 元素创建一个 m 行 n 列的二维数组。 original 中下标从 0 到 n - 1 &#xff08;都 包含 &#xff09;的元素构成二维数组的第一行&#xf…

mysql系统自带示例数据库_MySQL系统自带的数据库information schema

information_schema数据库是MySQL系统自带的数据库&#xff0c;它提供了数据库元数据的访问方式。感觉information_schema就像是MySQL实例的一个百科全书&#xff0c;记录了数据库当中大部分我们需要了结的信息&#xff0c;比如字符集&#xff0c;权限相关&#xff0c;数据库实…

Json对象与Json字符串互转(4种转换方式)

最近有用到php的json字符串要转成js对象&#xff0c;以前一直用jq或者eval&#xff0c;又发现了其他的方法&#xff0c;记录下. 1>jQuery插件支持的转换方式&#xff1a; 复制代码代码如下:$.parseJSON( jsonstr ); //jQuery.parseJSON(jsonstr),可以将json字符串转换成jso…

LeetCode 2023. 连接后等于目标字符串的字符串对

文章目录1. 题目2. 解题1. 题目 给你一个 数字 字符串数组 nums 和一个 数字 字符串 target &#xff0c;请你返回 nums[i] nums[j] &#xff08;两个字符串连接&#xff09;结果等于 target 的下标 (i, j) &#xff08;需满足 i ! j&#xff09;的数目。 示例 1&#xff1a…

What day is that day?(快速幂,打表找周期,或者求通项公式)

有些题怎么都解不出来&#xff0c;这时候可以打表&#xff0c;找规律&#xff0c;求通项公式等&#xff0c;这些方法让人拍手叫绝&#xff0c;真不错…… Description Its Saturday today, what day is it after 11 22 33 ... NN days? Input There are multiple test cas…

mysql中数据定义语言_SQL数据定义语言(DDL)

数据库模式定义语言DDL(DataDefinition Language)&#xff0c;是用于描述数据库中要存储的现实世界实体的语言。一个数据库模式包含该数据库中所有实体的描述定义。这些定义包括结构定义、操作方法定义等。DDL描述的模式&#xff0c;必须由计算机软件进行编译&#xff0c;转换为…

瞎搞

declare a int,b int,c int set a (select top 1 a from Table_1 ) set b (select top 1 b from Table_1 ) set c (select top 1 c from Table_1 ) if(a>b and a>c) beginprint(a的值最大)endif(b>a and b>c) beginprint(b的值最大)endif(c>a and c>b) be…