inline-block并排影响布局

最新推荐文章于 2022-10-31 14:49:15 发布

黄宝康

最新推荐文章于 2022-10-31 14:49:15 发布

阅读量537

点赞数

分类专栏： css 文章标签： inline-block

本文链接：https://blog.csdn.net/huangbaokang/article/details/105508406

版权

css 专栏收录该内容

33 篇文章 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>

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

问题剖析

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

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

解决方法

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

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

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

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

参考博客 https://www.cnblogs.com/jiangzilong/p/6145157.html

黄宝康

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
inline-block并排影响布局

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .my{ display: inline-block; border: 1px solid b...
复制链接

扫一扫