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

首先是对齐问题,可以把父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. QT的QWebView显示网页不全

    最近使用QWebView控件遇到一个问题,就是无论窗口多大,网页都显示那么大,而且,显示不完全,有滚动条 试过使用showMaximized()方法, 还是一样,网上一直说是布局问题,也没说清楚是虾米 ...

  2. jQuery form插件的使用--处理server返回的JSON, XML,HTML数据

    详细代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> & ...

  3. nyoj 115 城市平乱 dijkstra最短路

    题目链接: http://acm.nyist.net/JudgeOnline/problem.php?pid=115 dijkstra算法. #include "stdio.h" ...

  4. FZU 1608 Huge Mission(线段树)

    Problem 1608 Huge Mission Time Limit: 1000 mSec    Memory Limit : 32768 KB Problem Description Oaiei ...

  5. Hadoop Yarn core concepts

    The fundamental idea of YARN is to split the two major responsibilities of the JobTracker—that is, r ...

  6. TFSF边界条件

    待续 %1D FDTD simulation with a simple absorbing boundary condition % and a TFSF boundary between hy[] ...

  7. 学习web前端三个月感悟

    总结一下自己学习前端三个月的进步和不足: 其实也算机遇,开学时,便有一个PHP培训,只记得当时拿到培训课程的时候,第一感觉就是 好难,什么留言板制作,学生信息系统的制作,navicat和PHP结合使用 ...

  8. -bash: rz: command not found

    rz,sz是Linux/Unix同Windows进行ZModem文件传输的命令行工具.优点就是不用再开一个sftp工具登录上去上传下载文件. sz:将选定的文件发送(send)到本地机器rz:运行该命 ...

  9. 准备写一些读书笔记,最近在填坑 SQL学习指南 Spring in Action effective Java

    把一些读书的理解通过白板图的形式展示出来,加深自己的认识, 因为目前没有工程项目练手,暂时在学习中把这些知识深化认识一下

  10. css 字体不撑开默认块级元素问题

    问题原因是行高的元素没有随字体大小而改变,设置line-hight属性和字体同时变换