让多个span元素及其包含的div块并排显示的方法

要让多个span元素及其包含的div块并排显示，可以使用以下几种CSS方法：

方法一：使用flexbox布局

.container {
  display: flex; /* 启用flex布局 */
  flex-direction: row; /* 子元素横向排列 */
  align-items: center; /* 垂直居中 */
}

方法二：使用inline-block

span, .block {
  display: inline-block; /* 设置为行内块元素 */
  vertical-align: top; /* 顶部对齐 */
}

方法三：使用float

span, .block {
  float: left; /* 向左浮动 */
  margin-right: 10px; /* 添加右边距防止紧贴 */
}

/* 清除浮动 */
.container::after {
  content: "";
  display: table;
  clear: both;
}

方法四：使用grid布局

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 10px;
}

示例HTML结构

<div class="container">
  <span>文本1</span>
  <div class="block">块1</div>
  <span>文本2</span>
  <div class="block">块2</div>
</div>

注意事项

1. 如果元素之间有空格或换行符，inline-block方法可能会产生间隙，可以通过以下方式解决：

   .container {
    font-size: 0; /* 父元素字体设为0 */
   }
   span, .block {
    font-size: 16px; /* 子元素恢复字体大小 */
   }
   

2. 对于响应式设计，flexbox和grid布局更为灵活

3. 考虑添加适当的间距(margin/padding)以提高可读性

选择哪种方法取决于你的具体需求和浏览器兼容性要求。flexbox是目前最推荐的方式，因为它灵活且易于控制。