css

 .content{margin:0 auto;width: 600px;border: 3px solid #00c;overflow: hidden;}

 .left{float: left;width: 150px;background-color: #b0b0b0;padding-bottom: 2000px;margin-bottom:-2000px;}

 .right{float: left;width: 450px;background-color: #6cc;padding-bottom: 2000px;margin-bottom:-2000px;}

html

<div class="content">

            <div class="left">
　　　　　　　　　　　　　　　左边 
　　　　　　　　　　　<br />

                   <br />

                   <br />
　　　　　　　　　　　　　　　内容
　　　　　　  </div>

            <div class="right">

                   　　 　　右边

                   <br />

                   <br />

                   <br />
　　　　　　　　　　　<br />
　　　　　　　　　　　　　　　　内容

            </div>

 </div>

css布局多列等高的更多相关文章

  1. css设置多列等高布局

    初始时,多个列内容大小不同,高度不同.现在需要设置不同的背景来显示,而且各个列的高度需要保持一致.那么这就需要利用到多列等高布局. 最终需要的效果: 1. 真实等高布局 flex 技术点:弹性盒子布局 ...

  2. css布局--两列布局，左侧固定，右侧自适应（其中左侧要可以拖动，右侧水平滚动条）

    (css布局所要实现的效果) 在前端面试中经常会被问到CSS布局,两列布局,左侧固定,右侧自适应.前几天去面试,遇到了这道题的升级版,要求左侧可拖动,右侧要有水平滚动条.拿到题目确实有些大脑短路,不知 ...

  3. 前端应该掌握的CSS实现多列等高布局

    1.引言 我们在写页面的时候,有的时候会遇到多栏布局,每个栏目里面的内容有的时候可能不一样,这样就会导致每个栏目实际的高度也是不一样的,如果每个栏目有背景颜色的,就会导致每个栏目的底部是对不齐的,用户 ...

  4. [CSS布局]3列布局：左右两列固定宽度、中间列自适应满宽

    一种常见的3列布局,左右两列固定宽度.中间列自适应满宽.整个网页不出现横向滚动条 纯CSS实现 效果图: 代码: <!DOCTYPE html> <html lang="e ...

  5. 纯css实现两列等高

    <!doctype html> <html> <head> <meta /> <title>Title</title> < ...

  6. css布局之三列布局

    网站上使用三列布局的还是比较多的,不过三列和两列有些相似: 1.自适应三列 <!DOCTYPE html> <html lang="en"> <hea ...

  7. css布局之一列布局

    在我们浏览网页中经常看见一列布局其实一列布局就是 一般的一列布局的都是固定宽度的 body{margin:0;padding:0} .main{width:800px;height:300px;bac ...

  8. CSS布局 两列布局之单列定宽,单列自适应布局思路

    前言 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.比如斗鱼的直播间,后台管理系统都是常用的 我们将从 float, inline-block, table, absolute, fl ...

  9. 如何用纯CSS布局两列，一列固定宽度，另一列自适应？

    大家都知道好多网站都是左右布局的,很多公司在笔试和面试环节也常常问这个问题.一个去网易的师兄说14年腾讯面试的时候问过这个问题,网易在笔试和面试时候也问过这个问题,还有很多互联网公司也都涉及到这个问题 ...

随机推荐

  1. 10个学习Android开发的网站推荐

    1. Android Developers 作为一个Android开发者,官网的资料当然不可错过,从设计,培训,指南,文档,都不应该错过,在以后的学习过程中慢慢理解体会. 2. Android Gui ...

  2. AndroidStudio添加依赖库

    以Gson为例 Step1:点击下图中的入口,进入ProjectStructure Step2: 在app项中选择Dependencies窗口,点击右侧的加号 Step3:在搜索框中输入gson,点击 ...

  3. 使用UltraEdit实现从DOS文件到UNIX文件的批量转换

    最近把公司从SVN切到GIT下,因为大多同事在Windows下开发,又碰到换行符问题,找到一个批量转换方法 打开UE->在文件中替换,把^p替换成^n,然后设置好要替换的文件和路径,就开始替换吧 ...

  4. cdh集群数据恢复

    CDH 数据库 磁盘坏了  所有集群配置 都没了    而且 还没备份  ....    元数据 还在  cdh  软件配置 和  安装软件 不能用了 下载 apache hadoop   重新配置  ...

  5. asp.net mvc 之旅—— 第二站 窥探Controller下的各种Result

    平时我们在Action中编码的时候,我们都知道所有的Action返回值类型都是ActionResult,并且我们的返回值也是各种奇葩,比如:Json(),Content(), View()等等...当 ...

  6. IDENT_CURRENT ,@@identity,SCOPE_IDENTITY() 之间对比

    获取表的标识值,有3种比较常见的用法 IDENT_CURRENT ,@@identity,SCOPE_IDENTITY(),有啥不一样呢? 3个关键字在联机手册中的解释   IDENT_CURRENT ...

  7. SQL Server调优系列进阶篇（查询优化器的运行方式）

    前言 前面我们的几篇文章介绍了一系列关于运算符的基础介绍,以及各个运算符的优化方式和技巧.其中涵盖:查看执行计划的方式.几种数据集常用的连接方式.联合运算符方式.并行运算符等一系列的我们常见的运算符. ...

  8. python基础(一)

    简单的‘Hello World!’ Python命令行 假设你已经安装好了Python, 那么在Linux命令行输入: $python 将直接进入python.然后在命令行提示符>>> ...

  9. 关于CocoaPods update/CocoaPods install 慢、没反应、卡住的解决方案(Pods升级步骤)

    pod管理第三方库带来的便利大家有目共睹,但是--,估计有很多人会遇到这样一种尴尬情况: Pod install 或 Pod update  执行之后,就不动了,一直一个界面简直要崩溃... 网上有很 ...

  10. mysql连接报错 Host ‘xxx’is blocked because of many connection errors;unblock with 'mysqladmin flush-hosts'

    程序无法连接MySQL,提示:  null, message from server: "Host '192.168.6.68' is blocked because of many con ...