在HTML标准文档流中，块级元素默认会独占一行，因此两个块元素默认会上下排列。要实现两个块在同一行展示，需要通过特定的CSS样式调整元素的排列规则，以下是几种常用的实现方案。
方案一：修改display属性为inline-block
块级元素的默认display属性为block，将其修改为inline-block可以让元素既保持块级元素的宽高设置能力，又具备行内元素的同行排列特性。需要注意inline-block元素之间可能会有空白间隙，可通过设置父元素font-size为0消除。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.parent {
font-size: 0; /* 消除inline-block元素间的空白间隙 */
}
.block {
display: inline-block;
width: 200px;
height: 100px;
background-color: #f0f0f0;
margin-right: 10px;
font-size: 16px; /* 重置子元素字体大小 */
}
</style>
</head>
<body>
<div class="parent">
<div class="block">第一个块</div>
<div class="block">第二个块</div>
</div>
</body>
</html>
方案二：使用CSS浮动属性
给两个块元素设置float属性为left，可以让元素向左浮动排列，只要父容器宽度足够，两个浮动元素就会在同一行展示。使用浮动后需要注意清除浮动，避免影响后续元素布局。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.block {
float: left;
width: 200px;
height: 100px;
background-color: #e8f4ff;
margin-right: 10px;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="clearfix">
<div class="block">第一个块</div>
<div class="block">第二个块</div>
</div>
</body>
</html>
方案三：使用flex弹性布局
flex布局是目前前端开发中最常用的布局方式，给父容器设置display为flex，子元素会自动排列在同一行，无需额外设置其他属性，还可以灵活调整子元素的对齐方式和间距。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.parent {
display: flex;
gap: 10px; /* 设置子元素之间的间距 */
}
.block {
width: 200px;
height: 100px;
background-color: #f5e6ff;
}
</style>
</head>
<body>
<div class="parent">
<div class="block">第一个块</div>
<div class="block">第二个块</div>
</div>
</body>
</html>
方案对比与选择建议
不同方案的适用场景有所差异，以下是各方案的特点对比：
| 方案 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| inline-block | 兼容性较好，支持旧版本浏览器 | 存在空白间隙问题，需要处理间隙 | 需要兼容旧浏览器的简单布局 |
| 浮动布局 | 兼容性好，布局灵活 | 需要清除浮动，容易影响后续布局 | 旧项目维护，简单同行排列需求 |
| flex布局 | 语法简单，功能强大，易于调整对齐和间距 | 旧版本浏览器（如IE9及以下）不支持 | 现代前端项目，复杂布局需求 |
如果项目不需要兼容旧版本浏览器，优先推荐使用flex布局，开发效率更高，布局调整更灵活。如果需要兼容旧环境，可以根据需求选择inline-block或浮动方案。