inline-block对齐问题

如思学web 2017-03-02 05:28:33

比如说有两个div, 设置为inline-block。然后分别给二者设置宽高度。当div内有内容、无内容、一个又一个没有，那么对齐的形式就非常乱甚至怪异。
现象如下：

注意看两者的对其方式：1表示都没内容。2表示都有内容。3和4表示一个有，一个没有。
搜一下，也没看到什么结果。那么，谁明白为什么出现这种状况呢？
代码如下：





<!DOCTYPE html>

<html>

<head>

<style> 

.pink{

    display: inline-block;

    width: 100px;

    height: 100px;

    background-color: pink;

   

}

.blue{

    display: inline-block;

    width: 100px;

    height: 60px;

    background-color: dodgerblue;

}

</style>

</head>

<body>



<div class='pink'></div><div class='blue'></div><br>

<div class='pink'>1</div><div class='blue'>1</div><br><br>

<div class='pink'></div><div class='blue'>1</div><br><br>

<div class='pink'>1</div><div class='blue'></div><br>



</body>

</html>

...全文

1769 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

Ciya_ 2018-09-26

打赏
举报

1. 同一行的行内元素(inline) 默认都以文字基线对齐 2. 没有文字内容的行内块如图片你这里设置了display: inline-block但没放文字的div元素, 它的基线默认为块底部 3. 设置了display: inline-block但没放文字的div元素加了文字,基线变化为文字的基线就有了以下的效果:

qq_38367432 2017-04-18

打赏
举报

出现这个问题的原因归根结底就是inline-block的特性，两个inline-block之间的布局类似两个行内元素，但是可以设置width，height，上下margin。。。类似行内元素布局，两个inline-block元素并排时，没有写明vertical-align时，默认是以baseline对齐的，而inlineblock元素的baseline在哪里就要分有文字和没文字的情况，没有文字的情况baseline就是“margin-bottom的那条线”！！！！！有文字的情况baseline就是“最后一行文本的baseline”！！！！理解以上两点（对齐方式和baseline在哪里），你就能知道为什么会出现这么奇怪的布局。最后，在css布局格式化里面，行内格式化是最最最难以理解的，把这个学通了，感觉基本的格式化布局都是小儿科，希望我的回答能够对楼主有帮助。

daswcszxw 2017-03-03

打赏
举报

如果你的排版中涉及空内容，那就用block再浮动吧。至于具体原因个人认为浏览器对没有内容的行内块元素和有内容的行内块元素解析不一样。有时间去这里看看我没时间。。。。

看着是个昵称 2017-03-03

打赏
举报

在实际操作过程中一般使用浮动，inline-block有时候会存在一些问题，对齐方式决定是否错位

看着是个昵称 2017-03-03

打赏
举报

引用楼主 Hill_Kinsham 的回复:

比如说有两个div, 设置为inline-block。然后分别给二者设置宽高度。当div内有内容、无内容、一个又一个没有，那么对齐的形式就非常乱甚至怪异。现象如下：注意看两者的对其方式：1表示都没内容。2表示都有内容。3和4表示一个有，一个没有。搜一下，也没看到什么结果。那么，谁明白为什么出现这种状况呢？代码如下：
<!DOCTYPE html>
<html>
<head>
<style> 
.pink{
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: pink;
   
}
.blue{
    display: inline-block;
    width: 100px;
    height: 60px;
    background-color: dodgerblue;
}
</style>
</head>
<body>

<div class='pink'></div><div class='blue'></div><br>
<div class='pink'>1</div><div class='blue'>1</div><br><br>
<div class='pink'></div><div class='blue'>1</div><br><br>
<div class='pink'>1</div><div class='blue'></div><br>

</body>
</html>

添加一个vertical-align: top;就不存在你说的问题了