css怎么让两个盒子处于同一行不跑版

要让两个CSS盒子在同一行上显示而不跑版（即保持水平排列），你可以使用几种不同的布局技术：

1. **块级元素**：如果你的元素是默认的块级元素（比如`div`），设置它们的宽度，并且将容器的`display`属性设为`inline-block`或`flex`。例如：

   .container {
     display: inline-block; /* 或者 flex */
   }

   .box {
     display: inline-block;
     width: 48%;
     box-sizing: border-box;
     padding: 10px;
   }

这样两个`.box`会占据容器的48%，留有自动计算的间隙。

2. **Flexbox布局**：

   .container {
     display: flex;
     flex-wrap: nowrap; /* 防止换行 */
     justify-content: space-between; /* 自动分配空间，盒子间留空 */
   }

这里假设`.box`没有设置宽度，会默认按比例分配剩余空间。

3. **Grid布局**：
如果你喜欢网格布局，可以这样做：

   .container {
     display: grid;
     grid-template-columns: repeat(2, 1fr); /* 列数和等分 */
   }
   .box {
     /* 设置宽度或其它样式 */
   }

这会让两个盒子在同一行，每个占据一列。

在上述示例中，确保`.box`有足够的内容填充宽度，或者设置明确的宽度值。另外，也可以通过调整间隙(`margin`)或容器的`width`来控制两者的间距。