css 中如何将两个div的内容在同一行显示

在CSS中，如果你想让两个`<div>`元素的内容在同一行显示，可以使用 `display: flex` 或者 `inline-block` 属性结合。以下是两种常见的实现方法：

1. **使用 Flexbox**:

   .flex-container {
     display: flex;
     justify-content: space-between; /* 可选，调整元素之间的间距 */
     align-items: center; /* 如果需要，可以让内容垂直居中 */
   }
   
   .flex-item {
     flex: 1; /* 自动伸缩，保证两个元素等宽或按比例分配空间 */
   }
   
   <div class="flex-container">
     <div class="flex-item">div 1</div>
     <div class="flex-item">div 2</div>
   </div>

2. **使用 inline-block**:

   .block-item {
     display: inline-block;
   }

   <div class="block-container">
     <div class="block-item">div 1</div>
     <div class="block-item">div 2</div>
   </div>

这里 `.block-item` 的 `display` 设置为 `inline-block`，它们会按照文本的方式在同一行排列。