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. iOS创建、删除文件夹、获取沙盒路径

    1.获取沙盒路径 // 获取沙盒路径 NSString *documentsDirectory = [NSHomeDirectory() stringByAppendingPathComponent: ...

  2. 一起来学习Android自定义控件1

    概述 Android已经为我们提供了大量的View供我们使用,但是可能有时候这些组件不能满足我们的需求,这时候就需要自定义控件了.自定义控件对于初学者总是感觉是一种复杂的技术.因为里面涉及到的知识点会 ...

  3. 【读书笔记】iOS-GCD-GCD与perfomSelector系方法比较

    一,GCD是导师步执行任务的技术之一.一般将应用程序中记述的线程管理用的代码在系统级中实现.开发者只需要定义想执行的任务并追加到适当的Dispatch Queue中,CGD就能生成必要的线程并计划执行 ...

  4. 【读书笔记】iOS网络-应用间通信

    一,URL方案 URL方案有3个主要用途:根据设备上其他应用的存在与否调整逻辑,切换到其他应用以及响应打开你的应用的其他应用.你还可以通过URL方案从某个站点或是在基于Web的认证流程结束是打开应用. ...

  5. C# 依赖缓存

    使用轮询的方式 数据库: 在VS的命令里面输入 aspnet_regsql.exe -S (local) -U sa -P 123456 -d ERP_SQL -ed 上面这句是用来设置哪个服务器上的 ...

  6. 布局display

    什么是布局: 浏览器以正确的大小将元素摆放在正确的位置上. 布局:元素摆放的模式. 影响元素大小和位置的css属性: display  position   float  flex display 设 ...

  7. .net开发过程中遇到的错误，及解决办法记录

    一.在证书存储区中找不到清单签名证书. 解决方法:右击项目属性—>签名—>为ClickOnce清单签名,将勾掉的选项去掉. 参考:http://www.cnblogs.com/190196 ...

  8. C#语句2——循环语句（for穷举、迭代和while循环）

    一.for循环拥有两类: (一).穷举: 把所有可能的情况都走一遍,使用if条件筛选出来满足条件的情况. 1.单位给发了一张150元购物卡,拿着到超市买三类洗化用品.洗发水15元,香皂2元,牙刷5元. ...

  9. MySQL数据库的导入和导出

    1.导入数据库 在命令行下输入: mysql -u username -p test < /home/data/test.sql 说明: username                   是 ...

  10. java编写冒泡排序

    int[] arry={7,1,6,5,3,4,9,8,2}; for(int a=0;a<arry.length;a++) { for(int b=a+1;b<arry.length;b ...