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

首先是对齐问题,可以把父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. window10系统安装oracle11g时遇到INS-13001环境不满足最低要求

    机器安装了window10系统,之前有次安装oracle11g是成功了.但是机器后来固态硬盘坏了,又坏了个后,还是win10系统安装oracle11g时,出现INS-13001环境不满足最低要求,郁闷 ...

  2. JavaScript中判断为整数的多种方式

    之前记录过JavaScript中判断为数字类型的多种方式,这篇看看如何判断为整数类型(Integer). JavaScript中不区分整数和浮点数,所有数字内部都采用64位浮点格式表示,和Java的d ...

  3. [转]移动web开发中meta标签作用

    今天在尝试做移动页面的时候遇到了一个问题,<meta content="telephone=no,email=no" name="format-detection& ...

  4. python实现插入排序

    代码如下@.·.@ # *-* coding: utf- *-* if __name__ == '__main__': def insert_sort(l): ,len(l)): tmp = l[i] ...

  5. Centos源码安装Python3

    CentOS7默认安装了python2.7.5,当需要使用python3的时候,可以手动下载Python源码后编译安装. 下载python(https://www.python.org/ftp/pyt ...

  6. Android之数据存储----使用LoaderManager异步加载数据库

    一.各种概念: 1.Loaders: 适用于Android3.0以及更高的版本,它提供了一套在UI的主线程中异步加载数据的框架.使用Loaders可以非常简单的在Activity或者Fragment中 ...

  7. Jedis下的ShardedJedis(分布式)使用方法(二)

    上一篇中介绍了ShardedJedis的基本使用方法以及演示了一个简单的例子,在这一篇中我们来介绍了ShardedJedis的原理. 1.ShardedJedis内部实现 首先我们来看一下Sharde ...

  8. JetBrain WebStorm 注册码

    webStorm : UserName:William ===== LICENSE BEGIN ===== 45550-12042010 00001SzFN0n1bPII7FnAxnt0DDOPJA ...

  9. android获取当前行所属类和所属方法名

        第一种方法: String Method = Thread.currentThread().getStackTrace()[2].getMethodName();   第二种方法: priva ...

  10. 30Springd的包扫描——<context:component-scan base-package=” ”/>

    在context中配置 如:在base-package指明一个包: <context:component-scan base-package="cn.edu.dao"/> ...