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. JSP中request getParameter和getAttribute不同(转载)

    (1)request.getParameter()取得是通过容器的实现来取得通过类似post,get等方式传入的数据,,request.setAttribute()和getAttribute()只是在 ...

  2. git入门学习(二)：新建分支/上传代码/删除分支

    一.git新建分支,上传代码到新的不同分支  我要实现的效果,即是多个内容的平行分支:这样做的主要目的是方便统一管理属于同一个内容的不同的项目,互不干扰.如图所示: 前提是我的github上已经有we ...

  3. Spring源码阅读系列总结

    最近一段时间,粗略的查看了一下Spring源码,对Spring的两大核心和Spring的组件有了更深入的了解.同时在学习Spring源码时,得了解一些设计模式,不然阅读源码还是有一定难度的,所以一些重 ...

  4. webconfig 文件加密处理

    前几日正好遇到配置文件加密解密的问题,简单记录下流程. 1.首先运行cmd然后打开Framework.cd C:\Windows\Microsoft.NET\Framework\v4.0.303192 ...

  5. flume架构初接触

    flume优点 1．存储数据到任何中央数据库 2．进入数据速率大于写出速率,可以起到缓存作用,保证流的平稳 3．提供文本式路由 4．支持事务 5．可靠.容错.可伸缩.可定制.可管理 put的缺点 1． ...

  6. 首先，编写一个类ChongZai，该类中有3个重载的方法void print()；其次， 再编写一个主类来测试ChongZai类的功能

    //计算器 jisuanqi jsq=new jisuanqi(); System., )); System., , )); System.out.println("2.3和4.5 中最大的 ...

  7. js实现页面跳转的几种方式

    第一种:    <script language="javascript" type="text/javascript">           wi ...

  8. MySql安装与MySQL添加用户、删除用户与授权

    1.安装MySql       目前MySQL有两种形式的文件,一个是msi格式,一个是zip格式的.msi格式的直接点击setup.exe就好,按照步骤进行.但是很多人下了zip格式的解压发现没有s ...

  9. & fg jobs bg

    & 执行程序的后面加&可以将程序转到后台(这个后台是当前会话的后台,并不是守护进程)执行,即$./a.out &,这样我们在打开诸如$gedit test.txt的时候可以写成 ...

  10. Linux 文件常见类型