这是我自己在仿腾讯首页时遇到的布局问题,在此记录,如果有错,欢迎指正。

首先是对齐问题,可以把父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高度和宽度的应用的更多相关文章

  1. css 子div自适应父div高度

    <div class="out"> <div class="a"></div> <div class="b& ...

  2. 高度-宽度关系,同一div、不同div高度与宽度关系控制函数

    //对象1的高度等于对象2的高度n倍,调用方法:Ht1DivideHt2('#div2','#div1',3)//div2的高度是div1高度的3倍function Ht1DivideHt2(obj1 ...

  3. 子元素div高度不确定时父div高度如何自适应

    粘自:http://www.jb51.net/css/110652.html 在最外层div加以下样式 height:100%; overflow:hidden; 其它方法: Div即父容器不根据内容 ...

  4. css设置div高度与宽度相等的一种方法

    div.category{ width:33%; padding:33% 0 0; } 1.关键在padding:33% 0 0这句代码,通过设置padding-top与宽度相等(padding使用百 ...

  5. 父div高度不能根据子div高度自动变化的解决方案

    <div id="parent"> <div id="content"> </div> </div> 当cont ...

  6. 父div高度不能自适应子div高度的解决方案

    <div id="parent"><div id="content"> </div></div> 当conten ...

  7. 关于IE处理margin和padding值超出父元素高度的问题

    两个div,父div有padding值,子div有margin-top值,浏览器在解析实际父子位置关系时,他们之间的距离是父padding+子margin-top.现在把父div设置固定高度,并有意让 ...

  8. DIV高度自适应及注意问题(转)

    本文和大家重点讨论一下DIV高度自适应及注意问题,主要包括父div高度随子div的高度改变而改变和子div高度随父亲div高度改变而改变两种情况. DIV高度自适应及注意问题 积累了一些经验,总结出一 ...

  9. css中div高度自适应

    高度的自适应(父div高度随子div的高度改变而改变) 1.如果父div不定义height.子div均为标准流的时候,父div的height随内容的变化而变化,实现父div高度随子div的高度改变而改 ...

随机推荐

  1. MFC添加右键菜单

    本文原创转载请注明作者及出处 本文链接:http://blog.csdn.net/wlsgzl/article/details/42147277 --------------------------- ...

  2. 问题解决——WSAAsyncSelect模型 不触发 FD_CLOSE

    ==================================声明================================== 本文原创,转载在正文中显要的注明作者和出处,并保证文章的完 ...

  3. freemarker如何遍历HashMap

    查询资料有以下两种方法: 1. <#if appMap?exists> <#list appMap?keys as key> key:${key} value:${appMap ...

  4. Ubuntu16.04安装ROS-kinetic

    参考链接:http://www.voidcn.com/blog/wishchin/article/p-5972036.html 第一步: 软件源配置1. 增加下载源(增加ubuntu版的ros数据仓库 ...

  5. Java向上转型与向下转型

    一.向上转型 例如:Parent p=new Son(); 这样引用p只能调用子类中重载父类的方法:但属性是父类的:如果想调用子类属性的话,可以用getter()方法. 二.向下转型 子类对象的父类引 ...

  6. codeforces 487B B. Strip(RMQ+二分+dp)

    题目链接: B. Strip time limit per test 1 second memory limit per test 256 megabytes input standard input ...

  7. Spring 4.1+ 的 JSONP使用

    如今的巨石应用已经越来越不行了,很多互联网在后期都会在用分布式的架构 那么在页面上不同的服务调用不同域名下的json是有问题的 (跨域:不同域名,相同域名但是不同端口) JavaScript规范中提到 ...

  8. mysql查询语句包含有关键字

    查询mysql的时候,有时候mysql表名或者列名会有关键字.这时候查询会有错误.例如表名是order,查询时候会出错. 简单的办法是sql语句里表名或者列名加上`[tab键上面]来加以区别,例如se ...

  9. phpmyadmin后台拿shell方法总结

    方法一: CREATE TABLE `mysql`.`xiaoma` (`xiaoma1` TEXT NOT NULL ); INSERT INTO `mysql`.`xiaoma` (`xiaoma ...

  10. jquery中$("#afui").get(0)为什么要加get(0)呢?

    jquery中$("#afui").get(0)为什么要加get(0)呢? 2015-04-13 17:46SYYZZ3 | 浏览 509 次  Jquery $("#a ...