1、新建html文档，在body标签中添加一个div标签，然后在这个div标签中添加一些div标签：
2、为外div标签和内div标签添加一些样式，由于div元素是块级元素，所以内div会在外div中垂直排列：
3、为内div添加“display: inline-block”样式，这时内div就会变成行级块元素，这样内div就会在div中横向排列了：
一、问题可能涉及到了浮动和行内元素两个知识点，首先需要div布局，写一个大的div作为父级盒子，里面有几个行内元素。如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DIV内容横向排列</title>
<style type="text/css">
.container {
width: 500px
margin: 50px auto
overflow: hidden
border: 1px solid #ccc
}
div span {
display: block
width: 100px
height: 100px
background-color: hotpink
float: left
}
div>span+span {
margin-left: 100px
}
</style>
</head>
<body>
<div class="container">
<span>我是第一个</span>
<span>我是第二个</span>
<span>我是第三个</span>
</div>
</body>
</html>
二、主要是需要对div里面的行内元素进行样式的设置：
<style type="text/css">
.container {
width: 500px
margin: 50px auto
overflow: hidden
border: 1px solid #ccc
}
div span {
display: block
width: 100px
height: 100px
background-color: hotpink
float: left
}
div>span+span {
margin-left: 100px
}
</style>
三、HTML和CSS样式在开发工具里面的截图如下：
四、浏览器具体渲染的效果如下：
