父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的高度改变而改 ...
随机推荐
- IIS does not list a website that matches the launch url
233down voteaccepted I hate answering my questions: in my question i stated that i was running VS un ...
- ehcache的介绍和使用
ehcache结合spring cache主要注解使用:@Cacheable,@CacheEvict,@CachePut 在语法和配置等方面的使用 可以参考以下网站: 1.非常详细的spring m ...
- 虚拟机centos6.5 --设置主机名
vi /etc/sysconfig/network #修改HOSTNAME后面的值,机器名 vi /etc/hosts #设置ip和机器名的对应关系 192.168.12.232 master 192 ...
- Azure 上为Liunx VM 挂载File类型的存储。
1. Create a storage account in Azure, copy the storage account endpoint URL (with postfix of "f ...
- nginx看端口使用情况
[root@iZ94j7ahvuvZ sbin]# netstat -apn Active Internet connections (servers and established) Proto R ...
- 如何利用ZBrush中的DynaMesh创建身体(一)
之前的ZBrush教程中我们用Extract抽出功能演示了头发的立体雕刻方法,本讲将对已完成的头部模型添加躯干,使用DynaMesh创建身体的方法,以及人体比例和结构的介绍. 查看详细的视频教程可直接 ...
- Ngrok远程桌面及ssh配置
上一篇Ngrok 内网穿透利器 使用教程我们讲到Ngrok的基本使用教程,这篇描述一下Ngrok的远程桌面及ssh配置 Step 1 修改配置文件ngrok.cfg server_addr: &quo ...
- Unity手机平台播放影片
播放视频方法 截止到目前的Unity4.2版本,要在手机平台上播放影片,有两种方法: 使用Unity自带的Move Texture http://docs.unity3d.com/Documentat ...
- Adobe Scout 使用参考说明
Adobe Scout 用于优化 Flash 内容,是一款极为强大的工具,因为它能让您看到 Flash Player 幕后正在发生的事情.但是若明白 Flash Player 为什么做这些事情,您看到 ...
- Facebook或成云领域黑马 冲击亚马逊
[摘要]目前,云计算领域最大的服务是亚马逊AWS,据称此服务年度营收约为100亿美元. 转播到腾讯微博 BI中文站 3月22日报道 如今,多数人认为亚马逊在云计算领域的发展势头无人可档,不过,这个市场 ...