两个inline-block元素上下不对齐,出现错位
摘要: 声明:此文章为转载(点击查看原文),如有侵权24小时内删除。联系QQ:1522025433.
问题描述:在类似
<div class="ovh">
<h3 class="lh24 h24">
<img class="dib"><p class="h24 lh24 dib">发现深藏的好店</p>
</h3>
</div>
的布局中img和p都设置为inline-block。发现两个元素虽然在同一行上,但并不对齐。
是基线对其问题,进一步来说,两个 inline-block 的元素都按照默认的垂直对齐方式为什么会产生不同的对齐效果?原因在于容器使用了 overflow: hidden 属性,这一属性改变了 inline-block 元素的基线位置,导致这一元素上移。因此,同时设置两个元素的垂直对齐方式为非基线对齐的值,或为另一个元素添加 overflow 属性都可以解决这一问题。
两个inline-block元素上下不对齐,出现错位的更多相关文章
- CSS3如何去除 inline block 元素之间多出的空格
display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的. ...
- 多个inline元素、block元素、inline-block元素在父容器中的换行情况
1.首先看inine元素的换行情况 <style> *{padding:0;margin:0} div.wrap{width:200px;height:200px;border:1px s ...
- 当inline元素包裹block元素时会发生什么
经常有图片链接写法如下: <a href="www.baidu.com"><img src="baidu.jpg" /></a&g ...
- inline元素、block元素、inline-block元素
inline 内联元素:是不可以控制宽和高.margin等:并且在同一行显示,不换行,直到该行排满. block 块级元素:是可以控制宽和高.margin等,并且会换行.块级对象元素会单独占一行显示, ...
- block元素和inline元素的特点
一.block元素的特点 1.处于常规流中时,如果width没有设置,会自动填充满父容器 2.可以设置height/width及margin/padding 3.处于常规流中时,布局在前后元素位置之间 ...
- 关于block元素和inline元素
呃...这个会不会太基础了.最近在复习,所以基础知识也不能够忽略. 根据HTML 4.01 规范,其描述如下(http://www.w3.org/TR/html401/struct/global.ht ...
- inline元素、block元素
inline元素 不会独占一行,相邻的行内元素会排列在同一行内,直到一行排不下才会换行 高.行高.以及外边距和内边距不可改变 宽度就是它的文字或图片的宽度,不可改变,随元素内容变化而变化 内联元素只能 ...
- 两个div横向排列,顶端对齐的方式。
1.左右两个div都设置为float:left,如果右边div没有设置宽度,右边div的宽度会根据div里的内容自动调整. <!DOCTYPE html PUBLIC "-//W3C/ ...
- inline,block,inline-block的区别
display:block block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. block元素可以设置width,height属性.块级元 ...
随机推荐
- P1450 [HAOI2008]硬币购物
题目描述 硬币购物一共有4种硬币.面值分别为c1,c2,c3,c4.某人去商店买东西,去了tot次.每次带di枚ci硬币,买si的价值的东西.请问每次有多少种付款方法. di,s<=100000 ...
- 转--python 黑魔法2
Python 高效编程小技巧 个人博客:临风|刀背藏身 Python 一直被我拿来写算法题,小程序,因为他使用起来太方便了,各种niubi闪闪的技能点也在写算法的过程中逐渐被挖掘到,感谢万能的谷哥度娘 ...
- buildroot构建项目(六)--- u-boot 2017.11 适配开发板修改 4 ---- 系统启动初始化之三
一.内存控制器 在关闭了MMU和caches 之后 就进入lowlevel_init 函数,对内存控制器进行初始化.lowlevel_init.S (board\samsung\mini2440) 1 ...
- 第16月第6天 vs2005 lseek directdraw
1. //_lseek(file_handle, -(int)pbitmap->bitmapinfoheader.biSizeImage, SEEK_END); SetFilePointer(( ...
- 有关Linux的.a、.so和.o文件(转)【原文章有些错误,自己已更改】
gcc 生成 .a静态库和 .so动态库 我们通常把一些公用函数制作成函数库,供其它程序使用.函数库分为静态库和动态库两种.静态库在程序编译时会被连接到目标代码中,程序运行时将不再需要该静态库.动态库 ...
- Django学习手册 - 自定义simple_tag / filter
相关: Django的模板引擎提供一般性的功能函数,通过前端可以实现多数的代码逻辑功能,但它仅支持大多数常见情况下的函数功能,例如if判断,ifequal对比返回值等,复杂一些的函数功能并不支持,例如 ...
- 使用Idea初始化SpringMvc项目
(1) (2) (3) (4) (5)感谢http://www.cnblogs.com/feiyujun/p/6537510.html (6)
- Dubbo——基于Zookeeper服务框架搭建及案例演示
一.了解SOA微服务架构 在大规模服务化之前,应用可能只是通过RMI或Hessian等工具,简单的暴露和引用远程服务,通过配置服务的URL地址进行调用,通过F5等硬件进行负载均衡. (1) 当服务越来 ...
- ARMV8 datasheet学习笔记3:AArch64应用级体系结构之Memory Type and Attributes
1.前言 2. Memory类型和属性 memory分为normal memory和device memory,两种类型的Memory有各自的属性,除了下面介绍的几种属性外,还有其他一些杂项属性 2. ...
- springboot系列九,springboot整合邮件服务、整合定时任务调度
一.整合邮件服务 如果要进行邮件的整合处理,那么你一定需要有一个邮件服务器,实际上 java 本身提供有一套 JavaMail 组件以实现邮件服务器的搭建,但是这个搭建的服务器意义不大,因为你现在搭建 ...