css实现两列容器等高布局,CSS等高布局的实现方法
等高布局目前最流行的方法就是集“隐藏容器溢出”、“正内补丁”和“负内补丁”于一身的方法,有木有不明觉厉的赶脚?抛开这些乱七八糟的专有名词,其实就是比较常规的布局而已。
方法1:“隐藏容器溢出”+“正内补丁”+“负内补丁”
实现方法
给需要等高布局的元素用padding-bottom来填充,然后用margin-bottom来消除padding-bottom带来的影响,然后给父元素定义overflow:hidden。
实现原理
等高布局实现的原理是用最大高度的元素来撑高其他元素。给父元素定义的overflow:hidden出发了BFC或hasLayout,因此浮动元素的高度也应被计算在父元素中,同时overflow:hidden把超出父元素的部分隐藏;由于父元素的高度被撑到最大高度的子元素的高度,则相对较矮的元素的元素则会用padding-bottom来补偿这部分的高度差。由于背景可以显示在padding中,而且border也跟随padding变化,于是成功完成了一个障眼法。 备注:padding-bottom和margin-bottom应设置得足够大。
代码:
HTML代码:
CSS代码:
.parent {
width: 100%;
overflow: hidden;
]
.left, right {
float: left;
padding-bottom:9999px;
margin-bottom:-9999px;
}
.left {
width: 300px;
height: 300px;
}
.right {
width: 200px;
height: 400px;
}
方法2:使用背景图障眼法
实现原理
实现制作一张带有不同栏背景色的背景图应用于父元素中,定义背景图的repeat-y:repeat,給父容器定义overflow:hidden,使父元素的高度等于其子元素的最大高度,最后由父元素撑开背景图,视觉上好像完成了等高布局。
方法3:用JavaScript代码控制两列等高
实现原理
用JavaScript检测出多列布局中最大高度的一列,然后其他较矮的列的高度均等于最大高度,并且父元素的高度也等于最大高度(只要定义父元素overflow:hidden即可)。
HTML代码:
CSS代码:
.parent {
width: 100%;
overflow: hidden;
]
.left, right {
float: left;
padding-bottom:9999px;
margin-bottom:-9999px;
}
.left {
width: 300px;
height: 300px;
}
.right {
width: 200px;
height: 400px;
}
.middle {
width: 100px;
height: 500px;
}
JavaScript代码:
// 获取等高布局元素组和其父元素
var parent = document.getElementById("parent");
var equalHeightElement = getClassName(parent, oClassName);
// 获取等高元素组的元素的高度值
var elementsHeight = [];
for(var i = 0, len = equalHeightElement.length; i
elementsHeight[i] = equalHeightElement[i].offsetHeight;
}
// 获取等高元素组中最大高度的元素的高度值
var maxHeight;
for(var i = 0, len = elementsHeight.length; i
maxHeight = elementsHeight[0];
maxHeight = maxHeight > elementsHeight[i] ? maxHeight : elementsHeight[i];
}
// 给每一个等高元素组的定义高度为最大高度maxHeight
for(var i = 0, len = equalHeightElement.length; i
equalHeightElement[i].offsetHeight = maxHeight;
}
// 获得obj节点下class属性值为oClassName的子元素集合;
// 参数:obj指父元素;oClassName为元素的class属性值;
function getClassName(obj, oClassName) {
// IE9+及标准浏览器可以直接使用getElementsByClassName()获取className元素集合
if(document.getElementsByClassName) {
return obj.getElementsByClassName(oClassName);
}else {
// classNameArr用来装载class属性值为oClassName的元素;
var classNameArr = [];
// 获取obj的直接子元素
var objChild = obj.children || obj.childNodes;
// 遍历obj元素,获取class属性值为oClassName的元素列表
for(var i = 0; i
// 判断obj子元素的class属性值中是否含有oClassName
if( hasClassName(objChild[i], oClassName) ) {
classNameArr.push(objChild[i]);
}
}
return classNameArr;
}
}
// 判断object元素的class属性值中是否含有objectClassName
function hasClassName(object, objectClassName) {
// 将class属性值由空格切分为数组
var classNameList = object.className.split(/\s+/);
// 判断
for(var j = 0; j
return classNameList[j] = objectClassName ? true : false;
}
}
css实现两列容器等高布局,CSS等高布局的实现方法相关推荐
- DIV+CSS三行两列经典布局
师阿捷2004年发布在<网页设计师>上的,一个非常经典的布局,在IE.Mozilla和Opera浏览器中均可以实现居中和高度自适应.完整代码如下(在阿捷的代码基础上作了部分修改): < ...
- html三列布局和两列布局,CSS 常见两列布局、三列布局
一.两列布局: 方法一:采用position:absollute;并设置margin-left的值. #left{ position:absolute; width:300px; top:0px; l ...
- css 商城 两列_你需掌握的CSS知识都在这了(长文建议收藏,文末有福利)
1.CSS盒模型,在不同浏览器的差异 css 标准盒子模型 css盒子模型 又称为框模型(Box Model),包含了元素内容(content).内边距(padding).边框(border).外边距 ...
- css 商城 两列_如何使用css伪元素实现超实用的图标库(附源码)
今天我们来复盘一下前端中css伪元素的知识以及如何用css伪元素来减轻javascript的压力,做出一些脑洞大开的图形. 预备知识 伪元素 伪元素是一个附加至选择器末的关键词,允许你对被选择元素的特 ...
- css 商城 两列_css大法之使用伪元素实现超实用的图标库(附源码
今天我们来复盘一下前端中css伪元素的知识以及如何用css伪元素来减轻javascript的压力,做出一些脑洞大开的图形. 预备知识 伪元素 伪元素是一个附加至选择器末的关键词,允许你对被选择元素的特 ...
- DIV+CSS一行两列布局
实现效果: main 我是包在外面的div col1 我是第一列 col2 我是第二列 clear-float;我用来清除浮动(清除float) 以下是说明: CSS代码: .main{width:8 ...
- css 商城 两列_CSS 居中?来一探究竟
文章作者:家园工作室研发组成员 文章出处: CSS 居中?来一探究竟 | Wzb's Blogwzb.me 「居中」是进行布局时最常见的需求之一了.CSS 有多种居中的方式,在什么时候挑选适合的方案 ...
- css 商城 两列_【云控基础】HTML+CSS基础入门
课程大纲: 第一部分:课程概述1.什么是HTML.CSS,能做什么?2.HTML.HTML5.H5的区别3.HTML+CSS全览4.HTML.CSS的学习路径和学习方法第二部分:HTML+CSS开发环 ...
- css 商城 两列_基于SSM的网上水果生鲜超市商城管理系统
运行环境: 最好是java jdk 1.8,我们在这个平台上运行的.其他版本理论上也可以.IDE环境: Eclipse,Myeclipse,IDEA都可以tomcat环境: Tomcat 7.x,8. ...
- flex 固定一列_css实现两列固定与一列自适应的几种方法
本文介绍了css实现两列固定与一列自适应的几种方法,分享给大家,具体如下: 1.flex布局 Flexible Box 模型,通常被称为 flexbox,是一种一维的布局模型.它给 flexbox 的 ...
最新文章
- python java web_Python 与 Java 使用 websocket 通信
- #圆的周长和面积面向对象_数学实验 | 圆的面积公式推导
- for java_Java For循环
- S3C6410的SPI控制器
- discuz nt 安装,完全攻略。
- DNS域名系统的几个基础概念
- Win7下WinDbg开启Local Kernel Debug调试
- 《Python Cookbook 3rd》笔记(4.12):不同集合上元素的迭代
- stm32g474教程_(完整版)STM32F103通用教程
- 富文本TinyMCE
- java 导出word换行_POI写Word换行
- andriod 无网络逻辑设置和判断
- windows2003 php 加速,window_Win 2003 加速****,微软的Windown Server 2003尽管它是 - phpStudy...
- java 常用框架MP
- 从0到一开发微信小程序(1)——申请账号并安装开发环境
- [Golang]Benchmark性能测试
- 采用开源工具学习51单片机
- 左值和右值(C语言)
- ABAQUS正版软件价格/报价/售价/多少价钱?
- Labview兼职(部分)
热门文章
- penn tree bank POS数据处理
- c语言变量报存在bss段,C语言初始化——bss段初始化、跃入C、C与汇编
- yii2-jui的基本使用
- php ajax 域名查询,PHP+AJAX 实现域名查询系统
- 安装bcc、cachetop、cachestat
- 华为连接wifi显示wifi未连接服务器,华为手机连接WIFI但是无法上网怎么解决
- 时间限制的命令(timeout)
- 福大软工1816 · 第四次作业 - 团队展示
- *LOJ#2134. 「NOI2015」小园丁与老司机
- 20162327WJH 实验三 《敏捷开发与XP实践》 实验报告