一、前言
CSS中最常见的块元素，便是 div，每一个都将独立为一行。而最常见的内联元素，便是 span了，每一个都默认从左到右排列连接起来。
有时候我们需要 div 的结构，但是是需要 span 的效果，如何将这个特点一起利用起来呢？
二、需求
想把上图的京东·技术与数据中台，和logo为一行，初始代码如下，初始效果如上：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
.position-name {
font-weight: 600;
}
.position-desc {
font-size: 13px;
color: #a6a6a6;
}
</style>
</head>
<body>
<img src="http://itaem.oss-cn-shenzhen.aliyuncs.com/2020-01-30-09-20-49.png?Expires=4733990449&OSSAccessKeyId=LTAIATBJKsu6vu4R&Signature=gFck7TM%2BJF4kPxwF4U%2FlDLHuQFM%3D">
<div>
<div class="position-name">京东</div>
<div class="position-desc">技术与数据中台</div>
</div>
</body>
</html>三、解决
加上 display: inline-block，使之为内联元素，而非块元素即可，修改后的代码如下，修改后的效果如上：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
.position {
/* 融合为块元素 */
display: inline-block;
margin-left: 8px;
}
.position-name {
font-weight: 600;
}
.position-desc {
font-size: 13px;
color: #a6a6a6;
}
</style>
</head>
<body>
<img src="http://itaem.oss-cn-shenzhen.aliyuncs.com/2020-01-30-09-20-49.png?Expires=4733990449&OSSAccessKeyId=LTAIATBJKsu6vu4R&Signature=gFck7TM%2BJF4kPxwF4U%2FlDLHuQFM%3D">
<div class="position">
<div class="position-name">京东</div>
<div class="position-desc">技术与数据中台</div>
</div>
</body>
</html>四、小结
利用好 CSS 提供的 display: inline-block 属性即可。