为什么当多个inline-block的div中，如果有的div没有内容而有的div有内容，有内容的会下沉？

就像这样

两个div高度相同，第二个我写了一个1当作 有内容吧，它就下沉了。。。

奇怪。。。

为什么有内容的就比没有内容的矮呢？ 如果都有内容就一样高，求大神解释下

最外层的div声明了text-align：center；属性。。。为了让里面的inline-block的div们可以居中。。。

最佳答案

1.框内有文字和没文字的区别，高度伸展的方向是不一样的。当有文字的时候，高度是向下扩展的，没文字的时候是向上扩展的。ps：这里涉及了line-height，vertical-align，height等相关属性，我的语文也不是特别好，所以也组织不上来，就只能这么简单讲一下而已。2.因为框的高度都一样，所以设置一下vertical-align就可以让3个框都在同一水平上，top,bottom,middle 都可以，高度不一样的时候就会有区别了。

为什么当多个inline-block的div中，如果有的div没有内容而有的div有内容，有内容的会下沉？的更多相关文章

  1. “display:block-inline形式的Span或Div中添加文字后，导致Span或Div排版掉落、错位”的原因及解决方法

    最近在使用3个span(或div)制作带圆角边框的按钮时,按照常识,把span的display设置成inline-block,这样就可以设置span的width和height了,很爽的~ 可是当我在中 ...

  2. div中嵌套img元素，4px空白

    写布局的过程中遇到一个问题,在div中嵌套了img元素,没有指定div的高度,嵌套之后div高度始终比img高4个像素,没有设置内外边距,找不到原因. 除非强制div的高度为img的高度,才能使div ...

  3. div中如何让文本元素、img元素水平居中且垂直居中

    一.文本元素在div中的水平居中且垂直居中方法 html代码 <div id="box"> <p>文本元素</p> </div> c ...

  4. display:inline block inline-block 的区别

    原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...

  5. inline,block,inline-block解析

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

  6. 实现全屏轮播，并且轮播div中的文字盒子一直自动垂直居中

    效果如下: 直接上代码了: 说明:轮播图基于swiper.js,自行下载.css在最后 <!DOCTYPE html> <html lang="en"> & ...

  7. DIV中display和visibility属性差别

    DIV中display和visibility属性差别 DIV中display和visibility属性差别还是挺大的,虽然Visibility和Display属性都可以达到隐藏页面元素的目的,但它们的 ...

  8. 嵌套div中margin-top转移问题的解决办法

    在这两个浏览器中,有两个嵌套关系的div,如果外层div的父元素padding值为0,那么内层div的margin-top或者margin-bottom的值会“转移”给外层div. <!DOCT ...

  9. 让图片在div 中居中的方法

    方法一: 思路:利用text-align属性将图片水平居中,然后设置padding-top的值使其垂直居中. 结构如下: <div> <img src="images/tt ...

  10. 一款回到顶部的 jQuery 插件，支持 Div 中的滚动条回到顶部

    前言 今天在网上搜索“回到顶部”的 jQuery 插件,网上有很多,但是大部分都不支持让 Div 中的滚动条回到顶部.于是乎,不放弃,自己参考 Github 上的一个 jQuery 插件,经过自己的修 ...

随机推荐

  1. SQL索引添加

    EXPLAIN select * from view_agzsaycommont  where id >0

  2. 深入理解javascript原型和闭包（1）---一切都是对象

    深入理解javascript原型和闭包(1)---一切都是对象 type函数输出的类型,在此列出: function show (x){ console.log(typeof(x));//undefi ...

  3. Python异步通信模块asyncore

    https://docs.python.org/2/library/asyncore.html This module provides the basic infrastructure for wr ...

  4. linux-----------centos上搭建了lnmp环境，项目也上传上去了，刚开始没事，后来重启了以后就不行了。

    关闭防火墙就可以了.或者你打开防火墙对80端口的限制. systemctl stop firewalld.service #停止firewall systemctl start firewalld.s ...

  5. ACM-ICPC LA 4329 Ping pong（树状数组）

    https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&page=show_probl ...

  6. Access restriction: The type QName is not accessible due to restriction on required library

    There's another solution that also works. I found it on this forum: Go to the Build Path settings in ...

  7. jquery网页换肤+jquery的cookie+动态调用css样式文件,可以的

    比较具有参考性,代码全贴(当然,还需要一张图片需要的留个邮箱,看到就发) 贴在这儿吧,修改一下css的引用位置应该可以用 <%@ page language="java" c ...

  8. 《zw版·Halcon-delphi系列原创教程》 Halcon分类函数014,tuple，元组

    <zw版·Halcon-delphi系列原创教程> Halcon分类函数014,tuple,元组 为方便阅读,在不影响说明的前提下,笔者对函数进行了简化: :: 用符号“**”,替换:“p ...

  9. C/C++二维数组的用法

    二维数组在存储时按行优先连续存储,数组名是一个二维指针,如 int a[3][2] 中,a 是一个二维指针,而a[0],a[1],a[2]都相当于普通的一位数组的数组名,是一个固定值的指针. 二维数组 ...

  10. ExtJS6 TreePanel树节点合上展开显示不同图标

    TreePanel的节点如包含子节点,可在展开/合上时显示不同的图标,增强客户端效果,提高用户体验.非常简单,使用TreePanel的两个事件:beforeitemexpand和beforeitemc ...