假设我需要实现将三个块级元素并排对齐的如下效果：

代码如下：

 <!DOCTYPE html>

 <html lang="en-US">

 <head>

 <style>

 .container {

     display: inline-block;

     margin: 15px;

     padding: 5px;

     width: 200px;

     height: 200px;

     border: 1px solid black;

 }

 </style>

 </head>

 <body>

 <div style="margin: 200px;">

     <div class="container">

     <h2>Title</h2>

     <p>One One One One</p>

     </div>

     <div class="container">

         <h2>Title</h2>

         <p>Two Two Two Two</p>

     </div>

     <div class="container">

     <h2>Title</h2>

     <p>Three Three Three Three</p>

     </div>

 </div>

 </body>

 </html>

　　然而，如果当某个div块中没有内容时，就会发生该div块上浮无法对齐的情况：

　　造成这种现象的原因在于：行内元素和替换元素（如img、input、textarea等）会有个称做 基线 的东西；基线位于文字的最底部。如果块状行内元素（inline-block）中无文本内容的时候，其基线就会自动移至元素的最底部。另外，图片以及非替换元素的基线也是为元素最底部的。

上述元素都是以这个基线作为垂直对齐的默认参照的，那么 块状行内元素无法对齐的原因就很容易理解了；看下面几个例子：

　　既然这种情况是由元素以基线对齐才导致的，那么 只要设置元素的垂直对齐方式为别的就可以了；即使用vertical-align属性，该属性的参数如图：

　　比如为块状行内元素引入样式  vertical-align: top; 后，便可以了：

inline-block元素因基线对齐而造成上浮的问题的更多相关文章

  1. CSS3如何去除 inline block 元素之间多出的空格

    display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的. ...

  2. 多个inline元素、block元素、inline-block元素在父容器中的换行情况

    1.首先看inine元素的换行情况 <style> *{padding:0;margin:0} div.wrap{width:200px;height:200px;border:1px s ...

  3. 当inline元素包裹block元素时会发生什么

    经常有图片链接写法如下: <a href="www.baidu.com"><img src="baidu.jpg" /></a&g ...

  4. inline元素、block元素、inline-block元素

    inline 内联元素:是不可以控制宽和高.margin等:并且在同一行显示,不换行,直到该行排满. block 块级元素:是可以控制宽和高.margin等,并且会换行.块级对象元素会单独占一行显示, ...

  5. block元素和inline元素的特点

    一.block元素的特点 1.处于常规流中时,如果width没有设置,会自动填充满父容器 2.可以设置height/width及margin/padding 3.处于常规流中时,布局在前后元素位置之间 ...

  6. 关于block元素和inline元素

    呃...这个会不会太基础了.最近在复习,所以基础知识也不能够忽略. 根据HTML 4.01 规范,其描述如下(http://www.w3.org/TR/html401/struct/global.ht ...

  7. inline元素、block元素

    inline元素 不会独占一行,相邻的行内元素会排列在同一行内,直到一行排不下才会换行 高.行高.以及外边距和内边距不可改变 宽度就是它的文字或图片的宽度,不可改变,随元素内容变化而变化 内联元素只能 ...

  8. inline,block,inline-block的区别

    display:block block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. block元素可以设置width,height属性.块级元 ...

  9. CSS基础 行内元素/行内块元素设置垂直对齐方式及常见使用案例

    vertical-align 属性值 效果 baseline 基线对齐 top 顶部对齐 middle 中心对齐 bottom 底部对齐 使用案例1:百度搜索框左边和右边底部没有对齐 使用vertic ...

随机推荐

  1. 深度优先搜索DFS和广度优先搜索BFS简单解析

    转自:https://www.cnblogs.com/FZfangzheng/p/8529132.html 深度优先搜索DFS和广度优先搜索BFS简单解析 与树的遍历类似,图的遍历要求从某一点出发,每 ...

  2. 360 你妈妈知道你跟Python存在兼容问题吗？

    最近在用Python2.7.6版本开发的的过程中发现了一个问题 提示:UnicodeDecodeError:'ascii' codec can't decode bytes 0xb0 刚开始以为是编码 ...

  3. 3星|《哈佛商业评论》201708：IT项目风险之大远超你想象

    老牌管理学杂志.本期干货偏少,我评3星. 以下是本期一些信息的摘抄: 1:当我们调查被关闭餐馆周边的犯罪规律时,我们发现了与关闭药房同样的现象:被关闭餐馆周围财产犯罪和车内财物偷盗犯罪行为立即出现了上 ...

  4. Vue指令4：v-on

    监听事件 事件:click\keydown <button v-on:click="greet"></button> 可以简写为  <button @ ...

  5. CAD得到指定条件的实体

    主要用到函数说明: IMxDrawSelectionSet::Select2 构造选择集.详细说明如下: 参数 说明 [in] MCAD_McSelect Mode 构造选择集方式 [in] VARI ...

  6. 弹性分布式数据集（RDD）

    spark围绕弹性分布式数据集(RDD)的概念展开的,RDD是一个可以并行操作的容错集合. 创建RDD的方法: 1.并行化集合(并行化驱动程序中现有的集合) 调用SparkContext的parall ...

  7. 参考KOA，5步手写一款粗糙的web框架

    我经常在网上看到类似于KOA VS express的文章,大家都在讨论哪一个好,哪一个更好.作为小白,我真心看不出他两who更胜一筹.我只知道,我只会跟着官方文档的start做一个DEMO,然后我就会 ...

  8. 洛谷——P3018 [USACO11MAR]树装饰Tree Decoration

    P3018 [USACO11MAR]树装饰Tree Decoration 比较水的一道树上模拟水题,更新每个点的价值为以这个点为根的子树中的价值最小值,同时更新以每个节点为根的$sum$值,即以这个节 ...

  9. Go：变量、常量、枚举

    一.变量 package main import "fmt" func variableZeroValue() { // 变量声明 var a int var b string f ...

  10. 2.Linux文件IO编程

    2.1Linux文件IO概述 2.1.0POSIX规范 POSIX:(Portable Operating System Interface)可移植操作系统接口规范. 由IEEE制定,是为了提高UNI ...