<!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分列等高的更多相关文章

  1. 如何用css实现"等高布局"。

    有时候为了让网页实现美观,在不知道高度的情况下,我们要用css实现等高布局效果,传统的方法, 我们可以用javascript实现,但是由于需求决定或者其他的情况下,我们只能用css实现,其方法主要是采 ...

  2. css左右等高问题

    先看看预览效果:http://lgdy.whut.edu.cn/index.php?c=home&a=detail&id=3394 再来谈谈css左右等高的应用场景:在内容管理系统(c ...

  3. 深入了解css的行高Line Height属性

    什么是行间距? 古时候我们使用印刷机来出来文字.印刷出来的每个字,都位于独立的一个块中. 行间距,即传说中控制两行文字垂直距离的东东.在CSS中,line-height被用来控制行与行之间垂直距离. ...

  4. 从逻辑思维中学习CSS，从宽高说起

    从宽高说起 从宽高说起,我们知道一个物体的大小是由长.宽.高三个方向的尺寸决定的,但是你想啊电脑显示器是一个平面的,而不是3维,另因网页大部分情况下只需要使用到2维,所以为了简单在CSS中只有宽和高的 ...

  5. css未知宽高的盒子div居中的多种方法

    不知道盒子大小.宽高时,如何让盒子上下左右居中? 应用场景:比如上传图片时,并不知道图片的大小,但要求图片显示在某盒子的正中央. 方法1:让4周的拉力均匀-常用 <!-- Author: Xia ...

  6. css实现等高布局 两栏自适应布局 三栏自适应布局

    等高布局: HTML结构如下: <div class="wrapper"> <div class="box"> <h1>.. ...

  7. CSS 实现等高布局以及多行文本垂直居中

    将display属性设置为table-cell,具有table的特点. 1.同行等高. 2.宽度自动调节. 相当于表格是td, <style type="text/css"& ...

  8. 【CSS】等高布局

    1. 负margin:   margin-bottom:-3000px; padding-bottom:3000px; 再配合父标签的overflow:hidden属性即可实现高度自动相等的效果.   ...

  9. 前端之css（宽高）设置小技巧

    一.css宽高自适应: 1.宽度自适应: 元素宽度设为100%(块状元素的默认宽度为100%) 注:应用在通栏效果中 2.高度自适应: height:auto;或者不设置高度 3.最小,最大高度,最小 ...

随机推荐

  1. 【delphi】delphi出现‘尚未调用CoInitialize’异常

    1. 由于使用ado等引起的异常. 2. 若是子线程或某方法操作ado可在该方法开头和结尾分别加上: function myfun begin CoInitialize(nil); // your c ...

  2. C语言变量的存储布局

    分析以下代码中变量存储空间如何分配: //MemSeg.c: 代码无意义,仅供分析用 #include <stdio.h> #include <stdlib.h> //mall ...

  3. 【Python】协程

    协程,又称微线程,纤程.英文名Coroutine. 协程的概念很早就提出来了,但直到最近几年才在某些语言(如Lua)中得到广泛应用. 子程序,或者称为函数,在所有语言中都是层级调用,比如A调用B,B在 ...

  4. 非IMU模式下DML语句产生的REDO日志内容格式解读

    实验内容:非IMU模式下DML语句产生的REDO日志内容格式解读 最详细的解读是UPDATE的. 实验环境准备 11G中默认是开启IMU特性的,做此实验需要关闭此特性. alter system se ...

  5. python爬虫---->scrapy的使用(一)

    这里我们介绍一下python的分布式爬虫框架scrapy的安装以及使用.平庸这东西犹如白衬衣上的污痕,一旦染上便永远洗不掉,无可挽回. scrapy的安装使用 我的电脑环境是win10,64位的.py ...

  6. EXCEL通俗易懂讲公式(一):sumif,sumifs,countif,countifs

    最近公司招了一批新人,excel基本都是小白阶段,以前用过的也就是画个课程表,没做过什么数据统计和文本计算等工作.因此各种问题都来了,什么vlookup,offset,连条件求和的sumif也不会用, ...

  7. laravel调用sql server存储过程并取得ReturnValue

    alter proc [dbo].[aaa](    @AgencyID int,--代理商ID    @AdminID int --结算操作人ID(管理员ID))asbegin    select ...

  8. mysql架构图

    整体架构图 访问控制图

  9. sysbench 压力测试工具

    一.sysbench压力测试工具简介: sysbench是一个开源的.模块化的.跨平台的多线程性能测试工具,可以用来进行CPU.内存.磁盘I/O.线程.数据库的性能测试.目前支持的数据库有MySQL. ...

  10. php5.4 traits

    PHP 5.4中的traits,是新引入的特性,中文还真不知道如何准确翻译好.其实际的目的,是为了有的场合想用多继承,但PHP又没多继承,于是就发明了这样的一个东西.       Traits可以理解 ...