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

首先是对齐问题,可以把父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. ECharts 之一——入门

    一.简介 ECharts是一个来自百度的开源的javascript图标库.通过ECharts我们可以呈现出多种类型的图表.ECharts底层基于ZRender(一个全新的轻量级canvas类库),创建 ...

  2. cxf数据压缩

    一.HTTP数据的压缩 在http协议中当content-encoding对应的值为gzip,deflate,x-gzip,x-deflate时,数据是经过了压缩之后再进行传输的.有些时候我们当我们传 ...

  3. folly

    一.简介 Folly是,Facebook于2012年6月初开源的一个基于C++11的C++组件库,提供了类似Boost库和std库的功能,包括散列.字符串.向量.内存分配.位处理等,以满足大规模高性能 ...

  4. Keepalived高可用集群搭建(转载linuxIDC)

    1.Keepalived简介 Keepalived是一个基于VRRP协议来实现的WEB服务高可用方案,可以利用其来避免单点故障.使用多台节点安装keepalived.其 他的节点用来提供真实的服务,同 ...

  5. D_S 线性表的顺序表示和实现

    线性表的顺序表示又称为顺序存储结构或顺序映像 顺序存储定义:把逻辑上相邻的数据元素存储在物理上相邻的存储单元中的存储结构,简言之,逻辑上相邻,物理上也相邻 顺序存储方法:用一组地址连续的存储单元依次存 ...

  6. hdu 2048 神、上帝以及老天爷(错排)

    神.上帝以及老天爷 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total S ...

  7. [转]轻松学习Ionic (四) 修改应用图标及添加启动画面(更新官方命令行工具自动生成)

    本文转自:http://blog.csdn.net/zapzqc/article/details/42237935 由于Ionic更新了命令行工具,以后修改应用图标和添加启动画面就简单了,最新方法见最 ...

  8. Axure学习笔记1--原型设计概述

    Axure原型 1.原型的出现 -软件功能复杂,用户需求多 -挖掘用户的实际需求 -项目组之间降低沟通成本 2.类型: [草图原型]描述产品大概需求,记录瞬间灵感 [低保真原型]展示系统的大致结构和基 ...

  9. hihocoder-1389&&2016北京网赛07 Sewage Treatment(二分+网络流)

    题目链接: Sewage Treatment 时间限制:2000ms 单点时限:2000ms 内存限制:256MB 描述 After years of suffering, people could ...

  10. WPF窗口阴影和夜间模式的实现

    窗口阴影 实现 因项目需要给用户一定提示,设计师建议在鼠标进入时显示窗口阴影,离开时取消窗口阴影. 很自然,都会想到直接在窗口的内容或者自定义窗口的最外层元素上加效果.示例如下: <Grid&g ...