如何用css实现"等高布局"。
有时候为了让网页实现美观,在不知道高度的情况下,我们要用css实现等高布局效果,传统的方法,
我们可以用javascript实现,但是由于需求决定或者其他的情况下,我们只能用css实现,其方法主要是采用
“隐藏容器溢出”、"正内补丁"和"负外补丁"结合的方法实现的.
代码如下:
<div id="wrap">
<div id="left">
<p>left</p>
<p>left</p>
<p>left</p>
<p>left</p>
<p>left</p>
</div>
<div id="center">
<p>center</p>
……(20个或更多个)
<p>center</p>
</div>
<div id="right">
<p>right</p>
<p>right</p>
<p>right</p>
</div>
</div>
css样式如下:
<style>
* {margin:0;padding:0;}
#wrap { width:1000px; margin:0 auto; overflow:hidden;}
#left, #center, #right { margin-bottom:-10000px; padding-bottom:10000px;}
#left { float:left; width:250px; background:#00FFFF;}
#center { float:left; width:500px; background:#FF0000;}
#right { float:right; width:250px; background:#00FF00;}
</style>
其中的 10000px 可以修改为其他值,但不能小于最高列的高度。 经测试,此方法兼容 IE6/IE7/IE8 beta 2/FF/Opera/Chrome 。 方法很简单吧。从这里可以看出:看似简单的 CSS,其实并不简单。
如何用css实现"等高布局"。的更多相关文章
- css实现等高布局 两栏自适应布局 三栏自适应布局
等高布局: HTML结构如下: <div class="wrapper"> <div class="box"> <h1>.. ...
- 【CSS】等高布局
1. 负margin: margin-bottom:-3000px; padding-bottom:3000px; 再配合父标签的overflow:hidden属性即可实现高度自动相等的效果. ...
- CSS 实现等高布局以及多行文本垂直居中
将display属性设置为table-cell,具有table的特点. 1.同行等高. 2.宽度自动调节. 相当于表格是td, <style type="text/css"& ...
- CSS display:table属性用法- 轻松实现了三栏等高布局
display:table:此元素会作为块级表格来显示(类似 <table>); display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签.目前IE8+以 ...
- css设置多列等高布局
初始时,多个列内容大小不同,高度不同.现在需要设置不同的背景来显示,而且各个列的高度需要保持一致.那么这就需要利用到多列等高布局. 最终需要的效果: 1. 真实等高布局 flex 技术点:弹性盒子布局 ...
- 关于css解决俩边等高的问题(等高布局)
等高布局 前段时间公司需哦一个后台管理系统,左侧是导航栏,右侧是content区域.然厚刚开始用的是js 去控制的,但是当页面的椰蓉过长的时候,有与js单线程,加载比较慢,就会有那么一个过程,查找了很 ...
- 纯css实现div三列等高布局的最简单方法简化版/也可以多列
使用正padding和负margin对冲实现多列布局方法 这种方法很简单,就是在所有列中使用正的上.下padding和负的上.下margin,并在所有列外面加上一个容器,并设置overflow:hid ...
- CSS技巧 (2) · 多列等高布局
前言 最近,面试的时候都碰到一些关于利用CSS实现多列等高布局或者一侧宽度固定,另一侧宽度自适应的问题,下面稍微总结一下: 先看一道题目 巧妙的多列等高布局 规定下面的布局,实现多列等高布局,要求两 ...
- CSS等高布局的6种方式
× 目录 [1]边框模拟 [2]负margin [3]table[4]absolute[5]flex[6]js 前面的话 等高布局是指子元素在父元素中高度相等的布局方式.等高布局的实现包括伪等高和真等 ...
随机推荐
- HighCharts使用更多图表HighChartsMore
添加highcharts-moreimport HighCharts from 'highcharts'import highchartsMore from 'highcharts/highchart ...
- 【开发工具之Spring Tool Suite】6、用Spring Tool Suite简化你的开发
如果你是一个喜欢用spring的人,你可能会在欣赏spring的强大功能外,对其各样的配置比较郁闷,尤其是相差较大的版本在配置文件方面会存在差异,当然你可以去花不少的时间去网上查找相关的资料,当你准备 ...
- html页面边框的另一种写法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- array.js
// “最后加” concat 连接两个或更多的数组,并返回结果. var a = ['a','b','c']; var b = ['x','y','z']; var c = a.concat(b,t ...
- python基础之数据的三大结构
python的三大数据结构 1.顺序 2.分支 3.循环 # if语句联系# 如果age小于18岁,则打印信息“未成年”age = 17if age <= 18: print("未成年 ...
- Java 执行Shell脚本指令
一.介绍 有时候我们在Linux中运行Java程序时,需要调用一些Shell命令和脚本.而Runtime.getRuntime().exec()方法给我们提供了这个功能,而且Runtime.getRu ...
- 安卓开发-设置RadioButton的点击效果
在安卓开发中用到底部菜单栏 需要用到RadioButton这个组件 实际应用的过程中,需要对按钮进行点击,为了让用户知道是否点击可这个按钮,可以设置点击后 ,该按钮的颜色或者背景发生变化. layou ...
- Java并发编程(十二)Callable、Future和FutureTask
一.Callable与Runnable 先说一下java.lang.Runnable吧,它是一个接口,在它里面只声明了一个run()方法: public interface Runnable { pu ...
- [iOS]多线程和GCD
新博客wossoneri.com 进程和线程 进程 是指在系统中正在运行的一个应用程序. 每个进程之间是独立的,每个进程均运行在其专用且受保护的内存空间内. 比如同时打开QQ.Xcode,系统就会分别 ...
- centos6分辨率设置
问题描述 centos 6.9最小化安装后, 分辨率会很大, 当然也可以最小化VM虚拟机, 但是有强迫症的朋友可以设置一下. 解决方法 打开/etc/grub.conf配置文件, 在kernel 的最 ...