父<div>内有多个DIV并且position: relative，不允许父<div>内的DIV换行，只允许水平滚动

如果你想要在HTML中创建一个包含多个`<div>`元素的布局，这些`<div>`都定位为相对(`position: relative;`)，并且它们应该在同一行内水平滚动，而不允许换行，你可以使用CSS flexbox或者grid布局结合overflow-x属性来实现这个效果。

**使用Flexbox:**

<style>
.container {
  display: flex;
  overflow-x: auto;
  white-space: nowrap; /* 防止文本换行 */
}
.child-div {
  position: relative;
  flex-grow: 1; /* 自动分配剩余空间 */
}
</style>

<div class="container">
  <div class="child-div" style="width: 200px;">Child Div 1</div>
  <!-- 添加更多 div... -->
</div>

**使用Grid布局:**

<style>
.container {
  display: grid;
  overflow-x: auto;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); /* 自适应列宽 */
  white-space: nowrap;
}
.child-div {
  position: relative;
}
</style>

<div class="container">
  <div class="child-div">Child Div 1</div>
  <!-- 添加更多 div... -->
</div>

在这两种情况下，`.container`的`overflow-x`设置为`auto`使得内容可以水平滚动，而`white-space: nowrap`则保证了`<div>`们不会换行。