如何设置父Div，阻止其内部Div使用position: relative时自动换行显示，如果超过宽，水平滚动

为了防止父`<div>`内的`<div>`元素因为设置了`position: relative`并溢出宽度而自动换行并产生水平滚动条，你可以采用以下几个方法：

1. **设置父元素的宽度**:
确保父`<div>`有一个固定的宽度，并且设置了`overflow-x: hidden;`. 这样可以隐藏超出部分的内容，不会产生滚动条。

<div class="parent">
  <div class="child" style="position: relative;">...</div>
</div>

<style>
.parent {
  width: 300px; /* 自定义宽度 */
  overflow-x: hidden;
}
.child {
  position: relative; /* 子元素样式 */
}
</style>

2. **限制子元素的宽度**:
如果允许子元素内容动态调整大小，你可以给子元素设定最大宽度，比如通过媒体查询设置响应式宽度：

.child {
  position: relative;
  max-width: 100%; /* 或者某个具体的值 */
  overflow-x: auto; /* 当内容超过容器宽度时，创建滚动条 */
}

3. **使用CSS Grid或Flexbox布局**:
使用CSS Grid或Flexbox可以更直接地控制子元素的排列和尺寸，它们能帮助你更好地管理空间，避免因相对定位导致的换行。

   .parent {
     display: grid; /* 或 flex, 都可以实现单行排列 */
     grid-template-columns: fit-content(1fr);
   }
   
   .child {
     position: relative;
   }