CSS分列等高
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSONP 实例</title>
</head>
<style type="text/css">
.content{
margin: 0 auto;
width: 960px;
background-color: gray;
zoom: 1;
}
.content:after { content: ""; display: block; visibility: hidden; clear: both;height: 10px;background-color: blue;width: 100% ;clear: both;}
.left{
float: left;
height: 100%
} .corner1{
background-color: red;
margin-left: 100px;
width: 20%;
}
.corner2{
background-color: yellow;
width: 40%;
}
</style>
<body>
<div class="content">
<div class="left corner1">123<br/>123<br/>1234123<br/>123<br/>1234123<br/>123<br/>1234123<br/>123<br/>1234123<br/>123<br/>1234123<br/>123<br/>1234
我是好人<br/>
我是好人2<br/></div> <div class="left corner2">123<br/>123<br/>1234123<br/>123<br/>1234123<br/>123<br/>1234123<br/>123<br/>1234123<br/>123<br/>1234123<br/>123<br/>1234
我是好人<br/>
我是好人2<br/>
我是好人<br/>
我是好人2<br/>
</div>
</div>
</body>
</html>
/*在写HTML代码的时候，发现在Firefox等符合W3C标准的浏览器中，如果有一个DIV作为外部容器，内部的DIV如果设置了float样式，则外部的容器DIV因为内部没有clear，导致不能被撑开。
/*这个clearfix的CSS使用了after这个伪对象，它将在应用clearfix的元素的结尾添加content中的内容。在这里添加了一个句号"."，并且把它的display设置成block；高度设为0；clear设为both；visibility设为隐藏。这样就达到了撑开容器的目的啦。*/
/*这些东西的原理，就是让脱离文档流的元素回归到流当中，并且做一些浏览器的兼容*/
/*用after before的伪元素，需要给一个content但这个元素又不能被看到，所以就有了visibility: hidden; 和 height:0*/
CSS分列等高的更多相关文章
- 如何用css实现"等高布局"。
有时候为了让网页实现美观,在不知道高度的情况下,我们要用css实现等高布局效果,传统的方法, 我们可以用javascript实现,但是由于需求决定或者其他的情况下,我们只能用css实现,其方法主要是采 ...
- css左右等高问题
先看看预览效果:http://lgdy.whut.edu.cn/index.php?c=home&a=detail&id=3394 再来谈谈css左右等高的应用场景:在内容管理系统(c ...
- 深入了解css的行高Line Height属性
什么是行间距? 古时候我们使用印刷机来出来文字.印刷出来的每个字,都位于独立的一个块中. 行间距,即传说中控制两行文字垂直距离的东东.在CSS中,line-height被用来控制行与行之间垂直距离. ...
- 从逻辑思维中学习CSS，从宽高说起
从宽高说起 从宽高说起,我们知道一个物体的大小是由长.宽.高三个方向的尺寸决定的,但是你想啊电脑显示器是一个平面的,而不是3维,另因网页大部分情况下只需要使用到2维,所以为了简单在CSS中只有宽和高的 ...
- css未知宽高的盒子div居中的多种方法
不知道盒子大小.宽高时,如何让盒子上下左右居中? 应用场景:比如上传图片时,并不知道图片的大小,但要求图片显示在某盒子的正中央. 方法1:让4周的拉力均匀-常用 <!-- Author: Xia ...
- css实现等高布局 两栏自适应布局 三栏自适应布局
等高布局: HTML结构如下: <div class="wrapper"> <div class="box"> <h1>.. ...
- CSS 实现等高布局以及多行文本垂直居中
将display属性设置为table-cell,具有table的特点. 1.同行等高. 2.宽度自动调节. 相当于表格是td, <style type="text/css"& ...
- 【CSS】等高布局
1. 负margin: margin-bottom:-3000px; padding-bottom:3000px; 再配合父标签的overflow:hidden属性即可实现高度自动相等的效果. ...
- 前端之css（宽高）设置小技巧
一.css宽高自适应: 1.宽度自适应: 元素宽度设为100%(块状元素的默认宽度为100%) 注:应用在通栏效果中 2.高度自适应: height:auto;或者不设置高度 3.最小,最大高度,最小 ...
随机推荐
- AngularJS控制器和AngularJS过滤器的学习（3）
前面简单的学习了AngularJS的表达式和指令,就可以说大概对AngularJS有了一定的了解吧,嘿嘿,下面就来总结学习一下AngularJS的控制器和过滤器哦. 说起来AngularJS控制器,其 ...
- Lua学习笔记 入门的两个小程序
[Hello World]第一个Lua程序将遵循传统做法,打印一句“Hello World”: print("Hello World") [阶乘]下面的程序用于输出输入值对应的阶乘 ...
- openlayers中利用vector实现marker的方式
项目需要一个小型的gis.openlayers,geoserver,postgres组合是比较好的选择. openlayers的marker层好像不支持拖动操作.通过研究api发现,可以利用vecto ...
- Esper学习之八：EPL语法（四）
关于EPL,已经写了三篇了,预估计了一下,除了今天这篇,后面还有5篇左右.大家可别嫌多,官方的文档对EPL的讲解有将近140页,我已经尽量将废话都干掉了,再配合我附上的例子,看我的10篇文章比那140 ...
- 【线程】Thread中的join介绍
因为sleep.wait.join等阻塞,可以使用interrupted exception异常唤醒. 一.作用 Thread类中的join方法的主要作用就是同步,它可以使得线程之间的并行执行变为串行 ...
- 【Shell脚本编程系列】知识储备以及建立规范的脚本
前言 学习shell脚本编程需要的知识储备: vi/vim编辑器命令 vimrc设置要熟练 基础命令,100多个要熟练 基础和常用的网络服务命令要会:nfs . rsync. inotify . la ...
- 原生js--应用程序存储和离线web应用
1.应用程序缓存和其它存储方式的区别: a.不像localStorage和sessionStorage那样只存储web应用程序的数据,它将应用程序自身存储起来. b.不像浏览器缓存一样会过期或者被用户 ...
- goldengate 过滤对某张表的复制操作
在复制进程中配置下面的参数可以实现对一个用户下的某些表进行过滤,在复制的时候 不做任何操作. MAPEXCLUDE: Valid for Replicat Use the MAPEXCLUDE par ...
- Linux应急处理操作手册
基础准备--命令防篡改与命令记录 很多黑客入侵到操作系统后,会做两个常见的操作unset history和替换命令文件(或者对应的链接库文件),针对这两点要做好记录shelllog并且检查链接库类文件 ...
- python nose测试框架全面介绍四
四.内部插件介绍 1.Attrib 标记,用于筛选用例 在很多时候,用例可以分不同的等级来运行,在nose中很增加了这个功能,使用attrib将用例进行划分 有两种方式: ef test_big_do ...