vertical-align 属性设置元素的垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

inline-block的默认对齐方式是vertical-block：baseline（基线）。

关于baseline 基线的解释见：https://www.cnblogs.com/zxjwlh/p/6219896.html。

可将下面实例中 vertical-align: top; 删除 查看效果变化。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>vertical-align: top;</title>

</head>

<style>

    * {

        margin: 0;

        padding: 0;

    }

    .wrapper {

        width: 500px;

        padding: 0;

        background: #eee;

        margin: 0 auto;

    }

    .item {

        width: 200px;

        padding: 0;

        margin: 20px 23px;

        display: inline-block;

        vertical-align: top;

        text-align: center;

    }

    .box {

        width: 100%;

        height: 300px;

        box-shadow: 0 0 10px #bbb;

    }

    .title {

        word-wrap:break-word;

        font-size: 16px;

        line-height: 1.5;

    }

</style>

<body>

    <div class="wrapper">

        <div class="item">

            <div class="box"> </div>

            <p class="title">短标题</p>

        </div>

        <div class="item">

            <div class="box"> </div>

            <p class="title">这是一个长长长长长长长长长长长长长长长长长长长标题</p>

        </div>

        <div class="item">

            <div class="box"> </div>

            <p class="title">短标题</p>

        </div>

        <div class="item">

            <div class="box"> </div>

            <p class="title">短标题</p>

        </div>

    </div>

</body>

</html>

解决 div 设为 inline-block 后标题不对齐的更多相关文章

  1. 解决div用了position: fixed后滚动条显示不完整的问题

    由于div运用了position:fixed,内部通讯列表设置了height:100%,然而列表设置overflow:overlay 溢出部分显示不全,且无滚动条出现,最终找出原因在于顶部header ...

  2. div宽度设置width:100%后再设置padding或margin超出父元素的解决办法

    div宽度设置width:100%后再设置padding或margin超出父元素的解决办法 一.总结 一句话总结:直接加上box-sizing:border-box;即可解决上述问题. 1.box-s ...

  3. 解决div里面img的缝隙问题~

    解决div里面img的缝隙问题 图片IMG与容器下边界之间有空隙怎么办?这里介绍3中简单的解决方法. 第一,给图片img标签display:block. img{display:block} 第二,定 ...

  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里插入img下边缝隙问题

    <html>   <head>   <title> new document </title>   <meta name="author ...

  7. 四种方法解决DIV高度自适应问题

    本文和大家重点讨论一下解决DIV高度自适应的方法,这里主要从四个方面来向大家介绍,相信通过本文学习你对DIV高度自适应问题会有更加深刻的认识. DIV高度自适应 关于DIV高度的自适应,一直是个让人头 ...

  8. overflow:解决 div的高度塌陷问题

    高度塌陷是如何引起的? 解析: 当一个 div中所有的子  div都进行了浮动后,那么会出现该问题,那么解决方就是在父 div中 设置其  overflow:hidden;即可解决高度塌陷问题. 方式 ...

  9. (56) 解决字段设为readonly无法保存

    问题描述:当一个字段设为readonly =True 后,在form表单,即使你用onchange方法改变了值但也不能保存到数据库当时.平时在这样的要求,form表单有些字段要展示给用户,但又要达到不 ...

随机推荐

  1. 负载均衡（Load Balancing）学习笔记（三）

    本文讲述实现负载均衡的常用算法. 轮询法(Round Robin) 轮询法是负载均衡中最常用的算法,它容易理解也容易实现.轮询法是指负载均衡服务器(load balancer)将客户端请求按顺序轮流分 ...

  2. 通过递增快照备份 Azure 非托管 VM 磁盘

    概述 Azure 存储提供创建 Blob 快照的功能. 快照将捕获该时间点的 Blob 状态. 本文介绍有关如何使用快照维护虚拟机磁盘备份的方案. 如果选择不使用 Azure 备份和恢复服务,但想要为 ...

  3. ODS设计

    1.数据调研 2.确定数据范围 需要把上端应用需求与ODS数据范围进行验证,以确保应用所需的数据都已经从业务系统中抽取出来,并且得到了很好的组织,以ER模型表示数据主题关系 3.根据数据范围进行进一步 ...

  4. Software Engineer’s path to the best annual performance review

    http://michaelscodingspot.com/2017/06/04/software-engineers-path-best-annual-performance-review/ How ...

  5. fedora27安装后的配置工作（持续更新）

    换源 没什么可说的,安装后更换国内软件源是必须做的事,推荐更换阿里的镜像源.换源教程 添加epel源 EPEL (Extra Packages for Enterprise Linux)是基于Fedo ...

  6. Hadoop HBase概念学习系列之HBase里的HRegion（五）

    首先,要区分,HRegion服务器包含两大部分:HLog部分和HRegion部分 HBase里的HRegion服务器  HBase里的HRegion 当表的大小超过设置值的时候,HBase会自动将表划 ...

  7. ubuntu各类问题笔记

    ubuntu文本编辑器中文中文乱码问题解决 转载自:http://www.2cto.com/os/201201/117535.html 缺省配置下,用Ubuntu 的文本编辑器(gedit)打开GB1 ...

  8. priority_queue的优先级变化（结构体的写法）

    priority_queue的优先级变化(结构体的写法) 在头文件中加上#include <queue> 即可使用stl中的库函数priority_queue,优先队列默认的是从大到小的优 ...

  9. libcurl.dll 7.60.0静态库包含openssl/zlib

    最近做个QT的小程序需要使用LIBCURL支持HTTPS,结果查资料发现官方默认的是不支持的,需要手动重新编译,编译的时候加入SSL支持. 看着就好麻烦的样子, 找了一圈,还真有现成的,但是现在写程序 ...

  10. VS2013自带报表+打印功能

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/u010773667/article/details/27540389 经过了VB版机房收费系统的学习 ...