两列自适应布局的4种思路
前面的话
前面已经介绍过单列定宽单列自适应的两列布局,而两列自适应布局是指一列由内容撑开,另一列撑满剩余宽度的布局方式。本文将从float、table、flex和grid来介绍两列自适应布局的4种思路
float
【思路一】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;}
.right{overflow: hidden;zoom: 1;}
</style>
<div class="parent" style="background-color: lightgrey;">
<div class="left" style="background-color: lightblue;">
<p>left</p>
</div>
<div class="right" style="background-color: lightgreen;">
<p>right</p>
<p>right</p>
</div>
</div>
style="width: 100%; height: 60px;" src="https://demo.xiaohuochai.site/css/buju2/b1.html" frameborder="0" width="320" height="240">
table
【思路二】table
若table元素不设置table-layout:fixed,则宽度由内容撑开。在某个table-cell元素的外层嵌套一层div,并设置足够小的宽度如width:0.1%
<style>
p{margin: 0;}
.parent{display:table;width:100%;}
.leftWrap{display:table-cell;width:0.1%;}
.left{margin-right: 20px;}
.right{display:table-cell;}
</style>
<div class="parent" style="background-color: lightgrey;">
<div class="leftWrap" style="background-color: pink;">
<div class="left" style="background-color: lightblue;">
<p>left</p>
</div>
</div>
<div class="right" style="background-color: lightgreen;">
<p>right</p>
<p>right</p>
</div>
</div>
style="width: 100%; height: 60px;" src="https://demo.xiaohuochai.site/css/buju2/b2.html" frameborder="0" width="320" height="240">
flex
【思路三】flex
flex弹性盒模型是非常强大的布局方式。基本上,一般的布局方式都可以实现
[注意]IE9-不支持
<style>
p{margin: 0;}
.parent{display:flex;}
.right{margin-left:20px; flex:1;}
</style>
<div class="parent" style="background-color: lightgrey;">
<div class="left" style="background-color: lightblue;">
<p>left</p>
</div>
<div class="right" style="background-color: lightgreen;">
<p>right</p>
<p>right</p>
</div>
</div>
style="width: 100%; height: 60px;" src="https://demo.xiaohuochai.site/css/buju2/b3.html" frameborder="0" width="320" height="240">
grid
【思路四】grid
[注意]IE10-浏览器不支持
<style>
p{margin: 0;}
.parent{display:grid;grid-template-columns:auto 1fr;grid-gap:20px}
</style>
<div class="parent" style="background-color: lightgrey;">
<div class="left" style="background-color: lightblue;">
<p>left</p>
</div>
<div class="right" style="background-color: lightgreen;">
<p>right</p>
<p>right</p>
</div>
</div>
style="width: 100%; height: 60px;" src="https://demo.xiaohuochai.site/css/buju2/b4.html" frameborder="0" width="320" height="240">
更多专业前端知识,请上 【猿2048】www.mk2048.com
两列自适应布局的4种思路相关推荐
- 两列自适应布局方案整理
前提 本文讨论的是两列自适应布局:左列定宽/不定宽,右列自适应. 虽然分这两种情况,但实际上不定宽的方案同样适用于定宽的场景,因此不定宽的方案泛用度更高. 左列定宽,右列自适应 margin + fl ...
- 单列变双列css_css 两列布局中单列定宽单列自适应布局的6种思路
前面的话 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.本文将从float.inline-block.table.absolute.flex和grid这六种思路来详细说明如何巧妙地实现 ...
- html 三列布局(两列自适应,一列固定宽度)
不做过多解释:主要是记录一个完整的布局样式,实现页面大致三列其中左右两列是自适应宽度,中间固定宽度效果. 不多少代码奉上: CSS样式代码: /******************** *公共标签样式 ...
- DIV+CSS三行两列经典布局
师阿捷2004年发布在<网页设计师>上的,一个非常经典的布局,在IE.Mozilla和Opera浏览器中均可以实现居中和高度自适应.完整代码如下(在阿捷的代码基础上作了部分修改): < ...
- HTML变列自适应布局三行,div自适应居中_典型的DIV CSS三行二列居中高度自适应布局...
摘要 腾兴网为您分享:典型的DIV CSS三行二列居中高度自适应布局,弈玩游戏,携程,悟空单车,我和你等软件知识,以及驾考精灵,指尖遥控,广告拦截,浙江学习网,360主题桌面,平板电脑qq,咖啡厅室内 ...
- HTML变列自适应布局三行,CSS三行三列DIV高度自适应的设置
上一篇博客里引用了www.52css.com里的一篇关于使用脚本控制三行三列div高度自适应的设置方法,其实不必如此麻烦,只要给父div设置一个固定高度,比如10px,其子div的height:100 ...
- 在二维数组中寻找最小鞍点1181(该行最大值,该列最小值)(2种思路)
题目描述 找出一个2维数组矩阵的鞍点,即该位置上的元素在该行中最大,在该列中最小,可能不存在鞍点,如果存在多个,输出最小的那个! 输入要求 输入 n,m表示二维矩阵的行数和列数,然后根据行列数输入n* ...
- html 左边距自适应,左边定宽,右边自适应布局的几种方法
实际的页面开发中经常会遇到左边定宽,右边自适应的需求,特别是一些管理系统,比如左边显示信息或操作列表,右边显示详情,如下所示:. 针对这种布局,首先抽象出页面结构如下: 1 2 3 4 5 Docum ...
- 两边定宽,中间自适应布局的四种实现方法
1. 浮动法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
最新文章
- Java学习_强制类型转换
- PHP文件加到WordPress页面,WordPress-所有页面链接到index.php文件
- java质数判断程序_java判断一个数是否为素数/质数
- STM32移植LWIP
- SIGIR2021推荐系统论文集锦(附论文原文及代码链接)
- 一个数字几个字节_技术工坊40期-DAG技术特性以及在字节雪球Obyte项目的使用实践...
- Maintenance Plans(维护计划)详解【转】
- 基于统计的压缩算法:游程编码
- S7-1200PLC 连接单圈绝对值编码器(格雷二进制)
- Axure 9 Mac 版
- Excel高级函数应用总结
- 【2018.12.28】百度网盘永久保存2T容量办法
- 俄罗斯方块游戏(Python实现)
- l10n i18n vue_带有Vue的更多i18n:格式和后备
- apache beam java api_Apache Beam的基本概念
- Python爬虫包 BeautifulSoup 递归抓取
- (每日更新)《虚拟现实VR资讯》(Yanlz+Unity+SteamVR+云技术+5G+AI=VR云游戏=云渲染+人机交互+立钻哥哥+==)
- 服务器防火墙软件 —— iptables
- 例行性工作排程 (crontab)
- 扩充虚拟机文件系统的磁盘空间