css - inline-block 盒子下的内容文字错位问题
参考资料:
“display:block-inline形式的Span或Div中添加文字后,导致Span或Div排版掉落、错位”的原因及解决方法;
正文:
场景:两个 div 排在一行上,各有固定宽高,其中有一个 div 内部有文字和排版等其他填充;两个 div 杂七杂八的宽度加起来远小于 father 宽度。
拿到设计图之后,略想了一下,这不 so easy 么,既然有足够的宽度空间,那不就是随意发挥么:两 son 变 inline-block,那个有内容的 div 内或 padding ,或 flex,大致弄个上下等距不就 ok 了么,正好前面的人用 table-cell 来垂直居中,正好可以试试。然而事实证明太 naive 了,inline-block 中就藏了一个坑。
首先是思路中的效果:
.container {
width: 900px;
height: 300px;
background-color: #eee;
margin: 100px auto;
} .inbox {
display: inline-block;
width: 400px;
height: 100px;
background-color: #7b7f88;
} <div class="container">
<div class="inbox"></div>
<div class="inbox"></div>
</div>
很快啊,上面没什么问题(因为父元素的宽度足够,两个子元素之间的间隙可以忽略,当然这里也会出现隐藏坑,后叙)。于是很开心地去填充内容了,dom 结构变成:
<div class="container">
<div class="inbox"></div>
<div class="inbox">
<div>
<h2>55</h2>
</div>
</div>
</div>
愉快地 ctrl + s 之后 F5,然后就懵逼了,这不对啊,怎么成这样了,刚才不还好好的么,就加了句话???
于是经过翻山越岭地 Google baidu 之后,找到了参考中的资料:css 有个属性 vertical-align,它只在 display为 inline 或者 inline-block 的情况下起作用,默认值是 baseline。这意味着把元素设置成 inline(-block) 的时候,内部的文字会按照基线对齐,这也是为什么用尺子量,“55” 正好切了前一个 inbox 的 bottom。
那解决办法就简单了,每个 inbox 设置 vertical-aligh: top(如果父元素的高度是撑开的话,设置成middle、bottom、text-bottom、text-top 都可以),就可以回归思路,如下图:
其他:
在第一张图我们也看到, inline-block 的盒子之间是存在一点间隙的,这个问题和 HTML 的结构有关。正如上面我们贴的代码,两个 inbox 之间有一个换行,而浏览器在解释的时候遇到 inline(-block) 会把这个换行符解释成一个空白文本节点,这在视觉上就出现了间隙。解决办法有很多,贴两个常见的:
1. 代码写一行上,不过不利于维护;
2.父元素设置 font-size: 0,子元素重新设置字体大小;
各有优缺点,按需取用。
css - inline-block 盒子下的内容文字错位问题的更多相关文章
- 这些HTML、CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML、CSS、盒子模型、内容布局)
这些HTML.CSS知识点,面试和平时开发都需要 No1-No4 系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) ...
- web前端学习(三)css学习笔记部分(7)-- 文字和字体相关样式、盒子相关样式、背景与边框相关样式
12. 文字和字体相关样式 12.1 CSS3 给文字添加阴影 使用 text-shadow 属性给页面上的文字添加阴影效果,text-shadow 属性是在CSS2中定义的,在 CSS2.1 中 ...
- 纯css实现同一页面下选择之后更换内容效果
实现效果为如下:在同一页面下,当我选中输入手机号时,出现手机号输入框,当我选中输入验证码时,出现验证码输入框,当我选中设置密码时,出现密码框 在这里有一个小技巧,就是 1.对下面的输入框设置同样的样 ...
- CSS 概念 Block Inline Containing block
Block 元素 包括 "block-level box," "block container box," and "block box" ...
- 深度理解div+css布局嵌套盒子
1. 网页布局概述 网页布局的概念是把即将出现在网页中的所有元素进行定位,而CSS网页排版技术有别于传统的网页排版方法,它将页面首先在整体上使用<div>标记进行分块,然后对每个快进行CS ...
- CSS学习摘要-盒子模型
注:全文摘要自网络开发者网站,当然间隔也会整理一些思路和格式排版添加进去. CSS框模型(译者注:也被称为"盒模型")是网页布局的基础 --每个元素被表示为一个矩形的方框,框的内容 ...
- [19/06/06-星期四] CSS基础_盒子模型
一.盒子模型(框模型.盒模型) CSS处理网页时,它认为每个元素都在一个不可见的矩形盒子里. 为什么想象成盒子模型?因为把所有元素想象成盒子,那么我们对网页的布局就相当于摆放盒子.我们只需要把相应的盒 ...
- display:inline block inline-block 的区别
原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...
- Css之导航栏下拉菜单
Css: /*下拉菜单学习-2017.12.17 20:17 added by ldb*/ ul{ list-style-type:none; margin:; padding:; overflow: ...
随机推荐
- opencv进行视频播放每帧处理,读取视频失败
cv::VideoCapture capture(filename); if (!capture.isOpened()) { cout << "open video error& ...
- dp--最长上升子序列LIS
1759:最长上升子序列 总时间限制: 2000ms 内存限制: 65536kB 描述 一个数的序列bi,当b1 < b2 < ... < bS的时候,我们称这个序列是上升的.对 ...
- F5负载均衡综合实例详解(转)
转载自:https://blog.csdn.net/weixin_43089453/article/details/87937994 女程序员就不脱发了吗来源于:<网络运维与管理>201 ...
- PAT Advanced 1024 Palindromic Number (25) [数学问题-⼤整数相加]
题目 A number that will be the same when it is written forwards or backwards is known as a Palindromic ...
- Servlet&JSP复习笔记 03
1.Servlet的声明周期 容器如何创建Servlet对象,如何为Servlet对象分配资源,如何调用Servlet对象的方法来处理请求,以及如何销毁Servlet对象的过程. a.实例化 容器调用 ...
- drf框架知识点总复习
接口 """ 1.什么是接口:url+请求参数+响应数据 | 接口文档 2.接口规范: url:https,api,资源(名词复数), v1,get|post表示操作资源 ...
- 基于Flask框架搭建视频网站的学习日志(六)之数据库
使用Flask-SQLSlchemy管理数据库(1)--初步安装调试 一.介绍: Flask-SQLSlchemy是一个Flask扩展,简化了Flask中对sql的操作,是一个高层的框架,可以避免直接 ...
- Linux Man手册的使用示例
转载自:https://blog.csdn.net/ac_dao_di/article/details/54718710 Linux的命令非常多,很多人在学一个命令时,首先想到的是使用百度或者谷歌,或 ...
- 17)PHP,函数基础和参数问题
(1)函数定义形式: function 函数名字(形参1,形参2,形参3........) { 函数体(代码块) } (2)调用形式: 第一种:没有返回值的函数,则调用独立的语句 函数名(实参1,实参 ...
- java 中的小数点、大数、随机数处理
1.小数点处理 public class Test { public static void main(String[] args) { double i = 3.856; // 舍掉小数取整 Sys ...