高度-宽度关系,同一div、不同div高度与宽度关系控制函数
//对象1的高度等于对象2的高度n倍,调用方法:Ht1DivideHt2('#div2','#div1',3)//div2的高度是div1高度的3倍
function Ht1DivideHt2(obj1,obj2,n){
var oHeight= $(obj2).height()*n;
$(obj1).css("height", oHeight);
}
//对象1的宽度等于对象2的宽度n倍,调用方法:Wd1DivideWd2('#div2','#div1',3)//div2的宽度是div1宽度的3倍
function Wd1DivideWd2(obj1,obj2,n){
var oWidth= $(obj2).width()*n;
$(obj1).css("width", oWidth);
}
//对象的高度等于宽度的n倍,调用方法:HtDivideWh('#div1',2)//div1的高度是其宽度的2倍
function HtDivideWh(obj,n){
$(obj).css("height",function(){
var oWidth= $(this).width()*n;
$(this).height(oWidth);
});
}
高度-宽度关系,同一div、不同div高度与宽度关系控制函数的更多相关文章
- css实现div中图片高度自适应并与父级div宽度一致
需求:1.父级div不设置高度 2.图片高度自适应,并且显示为正方形: 以前遇到列表中图片高度必须和父级宽度相同,并且需要为正方形的时候,最开始的方法是定死图片高度,这样会导致不同分辨率下图片会压缩, ...
- div中iframe高度自适应问题
网页分为上.中.下三部分,上.下高度固定中间高度自适应:中间分为左.右两部分,左边宽度固定,右边宽度自适应.现在右侧div是宽度和高度都是自适应,右侧div里有个IFrame,想让IFrame自适应外 ...
- (转载)html中div使用自动高度
为什么要使用div标签 1.更多的配置项,那就意味着更灵活,当然,难度也更高: 2.可以方便的容纳其他html标签: static定位就是不定位,出现在哪里就显示在哪里,这是默认取值,只有在你 ...
- 关于div容器在ie6下默认高度不为0(存在默认高度)
最近做项目的时候遇到一个问题,相信很多人都遇到过,就是在测试兼容性的时候,在ie6下小于12px 的背景的高度不等于原高,或许这样说你可能不是很明白,那就举个例子吧! 如图所示: 锯齿状的背景图本来是 ...
- div+css总结—FF下div不设置高度背景颜色或外边框不能正常显示的解决方法(借鉴)
原地址:http://blog.sina.com.cn/s/blog_60b35e830100qwr2.html 在使用div+css进行网页布局时,如果外部div有背景颜色或者边框,而不设置其高度, ...
- Chrome&FF&Opera&下DIV不设置高度显示背景颜色和边框的办法
今天在排版的时候,外层的div不写高度的话背景颜色和边框没法办法显示,但是在IE下面就可以,这个有三个解决办法. 第一: 直接给最外层的div设置高度(不推荐). 第二: 在内部每个div后添加一个清 ...
- div有最小高度且自适应高度
DIV最小高度且自适应高度 在IE6中,如果子容器的高度超过父容器的时候,父容器会被子容器撑开,所以我们可以直接设置一个height的高度值即可.但是在IE7和firefox就不行了,它不会自动撑 ...
- H5新增属性contenteditable(不用JS,实现div模拟textarea高度自增长)
无意中看到一篇博客介绍了contenteditable这个属性——不需用JS,只需在div里加上contenteditable="true",即可实现div模拟textrarea( ...
- div不设置高度背景颜色或外边框不能显示的解决方法
在使用div+css进行网页布局时,如果外部div有背景颜色或者边框,而不设置其高度,在浏览时出现最外层Div的背景颜色和边框不起作用的问题. 大体结构<div class="oute ...
- div控制最小高度又自适高度
div控制最小高度又自适高度我们在用div布局的时候经常会遇到这样的一种情况:我们需要设置一个div的高度,当里面的东西超过这个高度时,让这个容器自动被撑开,也就是自适应高度.当里面的信息很少时候,我 ...
随机推荐
- 如何在Windows下用cpu模式跑通py-faster-rcnn 的demo.py
关键字:Windows.cpu模式.Python.faster-rcnn.demo.py 声明:本篇blog暂时未经二次实践验证,主要以本人第一次配置过程的经验写成.计划在7月底回家去电脑城借台机子试 ...
- MongoDb安装--yum安装
本帖最后由 草包 于 2017-5-2 09:57 编辑 [Shell] 纯文本查看 复制代码 ? 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 ...
- google guava cache缓存基本使用讲解
代码地址:https://github.com/vikde/demo-guava-cache 一.简介 guava cache是google guava中的一个内存缓存模块,用于将数据缓存到JVM内存 ...
- 班级博客客户端Beta阶段发布说明
班级博客客户端Beta阶段发布说明 NewTeam 2017/12/18 项目 博客园班级博客Android客户端 目录 发布方式和发布地址 新功能 修复的缺陷 对运行环境的要求 安装方法 已知的问题 ...
- Qt 显示图片的三种方法
一. 直接用QLabel显示原图 //单独显示的QLabel 其大小为内容即图片的大小,若将QLabel放入QMainWindow中则QLabel的大小为其初始大小. /* QLabel *label ...
- hibernate 映射组成关系
建立域模型和关系数据模型有着不同的出发点: 域模型: 由程序代码组成, 通过细化持久化类的的粒度可提高代码的可重用性, 简化编程 在没有数据冗余的情况下, 应该尽可能降低表的数目, 简化表之间的參照关 ...
- JAVA入门[20]-Spring Data JPA简单示例
Spring 对 JPA 的支持已经非常强大,开发者只需关心核心业务逻辑的实现代码,无需过多关注 EntityManager 的创建.事务处理等 JPA 相关的处理.Spring Data JPA更是 ...
- 【Jquery系列】之DOM属性
1 概述 本章将结合JQuery官方API,对Jquery属性进行分析与讲解.主要讲.addClass(),.attr(),,hasClass(),,html(),.prop(),.removeA ...
- 二、spring Boot构建的Web应用中,基于MySQL数据库的几种数据库连接方式进行介绍
包括JDBC.JPA.MyBatis.多数据源和事务. 一.JDBC 连接数据库 1.属性配置文件(application.properties) spring.datasource.url=jdbc ...
- 《跟我学IDEA》三、实用配置(行号、提示、代码等)
上一篇博文我们介绍了idea如何配置一个maven,git,tomcat等,这一篇我们来进行一些常用设置,这些也正是idea可爱之处,大大提高了开发的效率. 第一节:idea常用配置显示行数.显示方法 ...