父div高度和宽度的应用
这是我自己在仿腾讯首页时遇到的布局问题,在此记录,如果有错,欢迎指正。
首先是对齐问题,可以把父div的高度设置为0,然后调整padding值,这样可以批量调整子div们和其他父div的相对高度。
这是父div的样式
.loginicon {
width: 1000px;
height: 0px;
padding-top: 0px;
display: block;
}
调整padding-top值,效果如下:
如此就对齐了,,除此之外还发现,这个父div设置为block,它会随着宽度的不同而进行自适应向上浮,width为500px时效果如下:
width为850时效果如下:
很多地方都可以应用。
父div高度和宽度的应用的更多相关文章
- css 子div自适应父div高度
<div class="out"> <div class="a"></div> <div class="b& ...
- 高度-宽度关系,同一div、不同div高度与宽度关系控制函数
//对象1的高度等于对象2的高度n倍,调用方法:Ht1DivideHt2('#div2','#div1',3)//div2的高度是div1高度的3倍function Ht1DivideHt2(obj1 ...
- 子元素div高度不确定时父div高度如何自适应
粘自:http://www.jb51.net/css/110652.html 在最外层div加以下样式 height:100%; overflow:hidden; 其它方法: Div即父容器不根据内容 ...
- css设置div高度与宽度相等的一种方法
div.category{ width:33%; padding:33% 0 0; } 1.关键在padding:33% 0 0这句代码,通过设置padding-top与宽度相等(padding使用百 ...
- 父div高度不能根据子div高度自动变化的解决方案
<div id="parent"> <div id="content"> </div> </div> 当cont ...
- 父div高度不能自适应子div高度的解决方案
<div id="parent"><div id="content"> </div></div> 当conten ...
- 关于IE处理margin和padding值超出父元素高度的问题
两个div,父div有padding值,子div有margin-top值,浏览器在解析实际父子位置关系时,他们之间的距离是父padding+子margin-top.现在把父div设置固定高度,并有意让 ...
- DIV高度自适应及注意问题(转)
本文和大家重点讨论一下DIV高度自适应及注意问题,主要包括父div高度随子div的高度改变而改变和子div高度随父亲div高度改变而改变两种情况. DIV高度自适应及注意问题 积累了一些经验,总结出一 ...
- css中div高度自适应
高度的自适应(父div高度随子div的高度改变而改变) 1.如果父div不定义height.子div均为标准流的时候,父div的height随内容的变化而变化,实现父div高度随子div的高度改变而改 ...
随机推荐
- 【windows环境下】RabbitMq的安装和监控插件安装
RabbitMq的安装: RabbitMQ是基于Erlang的,所以必须先配置Erlang环境. 下载Erlang,地址:http://www.erlang.org/download/otp_win3 ...
- 枚举Enumerations
枚举,类似于数据库中的表. 难点:实例值和原始值. import Foundation enum Sex{ case Male(Int,Int) case Female(String) } var b ...
- jQuery Form 表单提交插件----Form 简介,官方文档,官方下载地址
一.jQuery Form简介 jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxF ...
- UVALive 6073 Math Magic
6073 Math MagicYesterday, my teacher taught us about m ...
- Java基础の第二弹 基础语法
Java关键字 • abstract:表明类或类中的方法是抽象的:• boolean:基本数据类型之一,布尔类型:• break:提前跳出一个块:• byte:基本数据类型之一,字节类型:• ...
- 18 多线程编程 - 《Python 核心编程》
- Ubuntu 14.04(32位)安装Oracle 11g(32位)全过程
1.将系统更新到最新:sudo apt-get updatesudo apt-get dist-upgrade2.安装Oracle所需的依赖包:sudo apt-get install automak ...
- makefile中的伪目标
伪目标就是总是被执行的目标,相对于目标来说,伪目标不会去考虑它的依赖的时间戳与自己时间戳的新旧关系,从而决定是否执行规则.伪目标格式: .PHONY:clean clean: -rm *.o 在mak ...
- uva 10976 fractions again(水题)——yhx
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAB3gAAAM+CAIAAAB31EfqAAAgAElEQVR4nOzdO7KtPJum69GEpAcVQQ ...
- POJ-1979 Red and Black(DFS)
题目链接:http://poj.org/problem?id=1979 深度优先搜索非递归写法 #include <cstdio> #include <stack> using ...