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>
...全文
1637 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;就不存在你说的问题了
仙掌人叔叔 2017-03-02
  • 打赏
  • 举报
回复
这种问题在实际中应该是不会碰到。 只做讨论还是可以 应该是baseline的原因 i玩林

61,110

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧