让两个包含span标签的div块并排显示的方法

要让两个包含span标签的div块并排显示，可以使用以下几种CSS方法：

方法一：使用float浮动

<div class="container">
  <div class="box">
    <span>内容1</span>
  </div>
  <div class="box">
    <span>内容2</span>
  </div>
</div>

<style>
.box {
  float: left;
  width: 50%; /* 或其他比例 */
}
/* 清除浮动 */
.container::after {
  content: "";
  display: table;
  clear: both;
}
</style>

方法二：使用display: inline-block

<div class="container">
  <div class="box">
    <span>内容1</span>
  </div>
  <div class="box">
    <span>内容2</span>
  </div>
</div>

<style>
.box {
  display: inline-block;
  width: 50%; /* 或其他比例 */
  vertical-align: top; /* 确保顶部对齐 */
}
</style>

方法三：使用flexbox布局（推荐）

<div class="container">
  <div class="box">
    <span>内容1</span>
  </div>
  <div class="box">
    <span>内容2</span>
  </div>
</div>

<style>
.container {
  display: flex;
}
.box {
  flex: 1; /* 或其他比例 */
}
</style>

方法四：使用grid布局

<div class="container">
  <div class="box">
    <span>内容1</span>
  </div>
  <div class="box">
    <span>内容2</span>
  </div>
</div>

<style>
.container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 两列等宽 */
}
</style>

注意事项

1. 如果div内有span元素，确保span的display属性不会影响布局（默认是inline）
2. 考虑添加适当的间距（margin/padding）
3. 现代布局推荐使用flexbox或grid，它们更灵活且易于维护
4. 如果需要响应式设计，可以结合媒体查询调整布局

以上方法都能实现两个div并排显示，选择哪种取决于你的具体需求和浏览器兼容性要求。