在网页设计中，经常会遇到父容器溢出滚动时，需要子 DIV 实现横向排列的需求。这一效果能够在有限的空间内展示更多内容，提升用户体验。下面将详细介绍实现这一效果的方法。

HTML 结构的搭建是基础。我们需要一个父容器和多个子 DIV。例如：

<div class="parent">
    <div class="child">子元素 1</div>
    <div class="child">子元素 2</div>
    <div class="child">子元素 3</div>
</div>

接下来，通过 CSS 样式来实现横向排列和父容器的溢出滚动效果。

对于父容器，要设置其宽度和高度，并开启溢出滚动。如下：

.parent {
    width: 300px;
    height: 200px;
    overflow-x: scroll;
    white-space: nowrap;
}

这里的 overflow-x: scroll 让父容器在水平方向溢出时出现滚动条，white-space: nowrap 确保子元素不会换行。

对于子 DIV，要设置它们为行内块元素，这样才能实现横向排列。代码如下：

.child {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: lightblue;
    margin-right: 10px;
}

display: inline-block 使子 DIV 能够在一行内排列，width 和 height 定义了子元素的大小，background-color 为了便于观察效果设置了背景颜色，margin-right 则添加了子元素之间的间距。

另外，如果希望滚动条样式更美观，可以通过浏览器前缀来进行自定义。例如：

.parent::-webkit-scrollbar {
    height: 8px;
}
.parent::-webkit-scrollbar-thumb {
    background-color: gray;
    border-radius: 4px;
}

这段代码针对 Webkit 内核浏览器（如 Chrome、Safari）自定义了滚动条的高度和拇指部分的样式。

通过以上步骤，就能轻松实现父容器溢出滚动时子 DIV 的横向排列。掌握这一方法，能够在网页布局中更加灵活地展示内容，为用户带来更好的视觉体验。无论是产品展示、图片画廊还是其他需要水平滚动展示元素的场景，都可以运用此方法来优化页面设计。