抱歉，您的浏览器无法访问本站

本页面需要浏览器支持（启用）JavaScript


了解详情 >

基于Inline-Block布局+vertical-Align的研究

jspeng
日常学习

发布于：2019年1月12日

前言：这个探究主要源于ife任务6的一个布局困扰，继而产生以下这些探究及结论，如解释有误或有新的见解，请及时与我联系，谢谢大家的捧场。

问题引入

有需求才会有解决方案，那么，这个需求是什么呢？

这是任务6布局的两个点

eg

eg

review了许多同学的代码，实现方式基本局限于两种，position定位、float+内外边距再者就是两者结合，那么又没有第三种更为简单的适合的方法呢？
答案是有的，那就是基于inlink-block+vertical-align的方式

inline-block + vertical-align

什么是inline-block相信大家比我还要清楚，但用来布局的话还有几个重要的点需要大家着重注意的：

inline-block是行内块级元素，因此这种布局仅适用于单排布局（这点大家应该不会有太多异议吧）
inline-block布局+vertical-align的关键点在于valign特性的使用，因此对于vertical-align的理解尤为关键（具体可参照张鑫旭大神关于vertical-align的理解）

解决方法

基于上述技术，我写了一个新的解决方法，具体如下：

html代码部分：

1
2
3
4
5
6
7
8
<header class="header">
    <div class="header-mark">
        <span>ife.baidu.com</span>
    </div>
    <div class="header-date">
        <span>2016.03</span>
    </div>
</header>

css代码部分：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
/*头部*/
.header{
    font-size: 12px;
    vertical-align: bottom;
}
    .header-mark{
        float: left;
        width: 110px;
        height: 61px;
        display: inline-block;
        background-color: #d45d5c;
    }
    .header-mark::before{
        content:'';
        line-height: 58px;
    }
    .header-mark>span{
        vertical-align: bottom;
    }
    .header-date{
        float:right;
        height: 61px;
        display: inline-block;
        color: #d45d5c;
    }
    .header-date::before{
        content:'';
        line-height: 58px;
        margin-left: -0.5em;
    }
    .header-date>span{
        vertical-align: bottom;
    }

原理其实很简单，利用伪元素去做基准线，然后其它元素以伪元素为基准进行排布，方便快捷，更重要的是这种方式维护起来也跟方便

结语

写的不好的地方请大家多多包涵，也请大家不吝啬给出意见，共同学习，共同进步，谢谢大家！

更新于：2019年1月12日

学习

百度Ife

评论