div+css实现的左右两个等高div
工作当中我们经常会有这样的需求,尤其是在一些内容页面或者网站后台管理页面:左边的div的高度会随着右边的div的内容的增加儿增加,右边div的高度也会随着左边div的内容的增加而增加,也就是左右两侧两个等高的div。如果不借助JS,而是单纯的使用div+css的方法该怎么实现呢?见代码:
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>div+css实现的左右两个等高div</title>
- <style>
- *{
- margin: 0;
- paddig: 0;
- }
- .wrap{
- width: 700px;
- overflow:hidden;
- margin: 0 auto;
- }
- .left,
.right{- margin-bottom: -100000px;/*数值随便设置,越大越好,也就是(-padding-bottom值)*/
- padding-bottom: 100000px;/*数值随便设置,越大越好*/
- }
- .left{
- width: 300px;
- float: left;
- background: yellow;
- }
- .right{
- width: 400px;
- float: right;
- background: green;
- }
- </style>
- </head>
- <body>
- <div class="wrap">
- <div class="left">
- left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>end</p>
- </div>
- <div class="right">
- <p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p>
- <p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p>
- <p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p>
- <p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p><p>left</p>
- <p>left</p><p>
- <p>right</p><p>right</p><p>right</p>
- <p>end</p>
- </div>
- </div>
- </body>
- </html>
div+css实现的左右两个等高div的更多相关文章
- [DIV+CSS] set the screen capture Part 1 (div截取屏幕)
使用下面的代码来获取屏幕.用DIV加CSS 来控制. 使用mousemove来获取移动的时候DIV的变化, 效果图如下: 使用5个DIV来组成实现截图目的第一部分,现在只是实现了选择的第一部分. HT ...
- 【CSS】三栏/两栏宽高自适应布局大全
页面布局 注意方案多样性.各自原理.各自优缺点.如果不定高呢.兼容性如何 三栏自适应布局,左右两侧300px,中间宽度自适应 (1) 给出5种方案 方案一: float (左右浮动,中间不用给宽,设置 ...
- div+css经典三行两列布局
写在前面 在面试的时候遇到这样一个笔试题,使用div+css布局一个三行两列的页面.这里主要考察的是css中postion的具体用法.详细信息可参考我这篇文章: [HTML/CSS]说说positio ...
- div+css总结—FF下div不设置高度背景颜色或外边框不能正常显示的解决方法(借鉴)
原地址:http://blog.sina.com.cn/s/blog_60b35e830100qwr2.html 在使用div+css进行网页布局时,如果外部div有背景颜色或者边框,而不设置其高度, ...
- 2天驾驭DIV+CSS (技巧篇)(转)
这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们.本文是技巧篇. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” ...
- 2天驾驭DIV+CSS (实战篇)(转)
这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们.本文是实战篇. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” ...
- 2天驾驭DIV+CSS (基础篇)(转)
这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” 将你引入两大误区 ...
- 用DIV+Css+Jquery 实现的旧版微信飞机大战。
用jquery 实现的旧版微信飞机大战. 以前一直都是做后台和业务逻辑,前端很少去做, 现在个小游戏. 方向键控制方向,Ctrl 键 放炸弹(当然你的有炸弹,哈哈)! 主要都是用div+Css实现的, ...
- 《Two Days DIV + CSS》读书笔记——CSS控制页面方式
1.1 你必须知道的知识 (其中包括1.1.1 DIV + CSS的叫法解释:1.1.2 DIV + CSS 名字的误区:以及1.1.3 W3C简介.由于只是背景知识,跳过该章.) 1.2 你必须掌握 ...
随机推荐
- protocol buffer的简单使用
protocol buffer是一个高效的结构化数据存储格式,用来结构化数据的序列化与反序列化.目前支持java.c++.Python 相对于json而言: 数据量跟小 其他的还没看出什么优势 下载地 ...
- 去掉html标签和空格等
<?php$str = '<span style="color:#f00;">good; world</span>';echo $str.'<b ...
- [node.js]RPC(远程过程调用)的实现原理
刚接触到RPC(远程过程调用),就是可以在本地调用远程机子上的程序的方法,看到一个简单的nodejs实现,用来学习RPC的原理很不错:nodejs light_rpc 使用示例: //服务端 ...
- 【面试题】如何让C语言自动发现泄漏的内存
1. 题目 改造malloc和free函数,使C语言能自动发现泄漏的内存,在程序退出时打印中遗漏的内存地址和大小. 2. 思路 用一个链表来记录已经分配的内存地址.在malloc时,把分配的内存地址和 ...
- Spring JTA multiple resource transactions in Tomcat with Atomikos example--转载
原文地址:http://www.javacodegeeks.com/2013/07/spring-jta-multiple-resource-transactions-in-tomcat-with-a ...
- objc_msgSend消息传递学习笔记 – 对象方法消息传递流程
在Effective Objective-C 2.0 – 52 Specific Ways to Improve Your iOS and OS X Programs一书中,tip 11主要讲述了Ob ...
- lambda expand in list
[(lambda x: x*x)(x) for x in range(10)] Or better yet: [x*x for x in range(10)]
- CI框架中自定义view文件夹位置
要想自定义view文件夹的位置,首先要了解CI框架时如何加载view文件夹的. CI中默认调用view的方法是: $this->load->view(); //这一行代码的原理是什么呢?请 ...
- 分布式 ES 操作流程解析
概念解析 CURD 操作 CURD 操作都是针对具体的某个或某些文档的操作,每个文档的 routing 都是确认的,所以其所在分片也是可以事先确定的.该过程对应 ES 的 Document API. ...
- SpringMVC框架
一.SpringMVC工作流程图 DispatcherServlet:Spring提供的前端控制器,所有的请求都有经过它来统一分发.在DispatcherServlet将请求分发给Spring Con ...