inline-block并排影响布局

客官°小女子只卖身不卖艺 2023-07-25 09:38 6阅读 0赞

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    			.my{
    				display: inline-block;
    				border: 1px solid blue;
    				height: 200px;
    				width: 200px;
    			}
    		</style>
    	</head>
    	<body>
    		<div>
    			<div class="my">
    				<span>huang</span>
    			</div>
    			<div class="my">
    				<span>bao</span>
    			</div>
    			<div class="my">
    				<span>kang</span>
    			</div>
    			
    		</div>
    			
    	</body>
    </html>

页面呈现效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5nYmFva2FuZw_size_16_color_FFFFFF_t_70]  
并排显示正常，当第二个div没有内容的时候，惊讶的显示为如下效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5nYmFva2FuZw_size_16_color_FFFFFF_t_70 1]

## 问题剖析 ##

那为什么inline-block元素的位置会受到其内容的影响呢？我们可以查到这样一句话：inline-block元素可以将对象呈递为内联对象，但是对象的内容作为块对象呈递。

有了这样的属性，我们就可以在表现上将对象用作内敛元素但又可以对它进行宽高设置。但有一点需要注意的是对象仍然呈递为内联元素，而同一行内的内联元素默认是基于 baseline 对齐的

## 解决方法 ##

1、暴力float，当然这是备选方案，毕竟脱离文档流后页面元素会不好控制

2、简单粗暴地给所有元素都加上内容，例如空格符

3、设置所有内联元素 vertical-align: top/middle/bottom; 属性，改变默认设置

推荐使用第三种方法，在my class增加vertical-align，并排布局在同一行中显示。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5nYmFva2FuZw_size_16_color_FFFFFF_t_70 2]

参考博客 [https://www.cnblogs.com/jiangzilong/p/6145157.html][https_www.cnblogs.com_jiangzilong_p_6145157.html]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5nYmFva2FuZw_size_16_color_FFFFFF_t_70]: /images/20230528/e29f68d7a72a48478e976c0435fa4312.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5nYmFva2FuZw_size_16_color_FFFFFF_t_70 1]: /images/20230528/9c09373b12864b99bace58f52a7656f3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5nYmFva2FuZw_size_16_color_FFFFFF_t_70 2]: /images/20230528/c441fe603c414559879616c783299f5e.png
[https_www.cnblogs.com_jiangzilong_p_6145157.html]: https://www.cnblogs.com/jiangzilong/p/6145157.html