如何实现Div内联排列并自定义内部Div位置，解决带滚动条内联Div添加内部元素后布局崩溃问题

我来帮你搞定这个布局难题！你遇到的问题主要是因为之前的CSS方案没处理好内联元素的布局特性，或是脱离文档流导致滚动失效。下面给你两种可靠的解决方案，先看最推荐的Flexbox方案：

方案一：Flexbox布局（推荐） #

Flexbox是现代CSS布局的首选，它能完美解决横向滚动+内联排列的需求，同时避开inline-block或float的各种坑。

完整代码 #

<div class="inlineContainer">
 <div class="inlineDiv">
 <div id="customDiv1">inside div 1</div>
 </div>
 <div class="inlineDiv">
 <div id="customDiv2">inside div 2</div>
 </div>
 <!-- 可以继续添加更多inlineDiv，自动横向排列并触发滚动 -->
</div>

.inlineContainer {
  width: 100%;
  height: 150px;
  overflow-x: auto; /* 仅在内容超出时显示横向滚动条 */
  overflow-y: hidden;
  display: flex; /* 启用Flex布局实现横向排列 */
  /* 可选：设置inlineDiv之间的间距，比如gap: 10px; */
}

.inlineDiv {
  height: 100px;
  width: 100px;
  flex-shrink: 0; /* 强制保持固定宽度，不被压缩 */
  position: relative; /* 让内部绝对定位元素以它为参照 */
  border: 1px solid #ddd; /* 可选：加边框方便观察布局 */
}

#customDiv1 {
  position: absolute;
  left: 10px;
  top: 20px; /* 补充top属性，确保定位准确 */
  width: 50px;
  height: 50px;
  background-color: #f5f5f5;
}

#customDiv2 {
  position: absolute;
  left: 20px;
  top: 40px;
  width: 60px;
  height: 50px;
  background-color: #e8e8e8;
}

为什么这个方案有效？ #

• Flex布局天然支持横向排列，不需要依赖white-space: nowrap这种hack。
• flex-shrink: 0确保每个inlineDiv都保持你设置的固定宽度，不会因为容器空间不足被压缩。
• 内部元素用绝对定位时，只要inlineDiv设置了position: relative，就能精准控制位置，完全不影响外层的横向滚动布局。
• 可以通过gap属性轻松控制inlineDiv之间的间距，避免inline-block的空白间距问题。

方案二：修正inline-block方案 #

如果你一定要用inline-block，也可以通过以下修正解决之前的布局异常问题：

.inlineContainer {
  width: 100%;
  height: 150px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  font-size: 0; /* 消除inline-block元素之间的空白间距 */
}

.inlineDiv {
  height: 100px;
  width: 100px;
  display: inline-block;
  position: relative;
  vertical-align: top; /* 修正垂直对齐错位问题 */
  font-size: 16px; /* 恢复字体大小，避免内部文字继承0 */
  border: 1px solid #ddd;
}

/* 内部元素的CSS和方案一一致 */
#customDiv1 {
  position: absolute;
  left: 10px;
  top: 20px;
  width: 50px;
  height: 50px;
  background-color: #f5f5f5;
}

#customDiv2 {
  position: absolute;
  left: 20px;
  top: 40px;
  width: 60px;
  height: 50px;
  background-color: #e8e8e8;
}

之前的问题分析 #

• CSS1/CSS2的inline-block问题：inline-block元素之间默认会有空白间距（来自HTML的换行/空格），且默认的vertical-align: baseline会导致元素对齐错位，加上内部元素的margin或绝对定位，就容易触发布局崩溃。
• CSS3的float问题：float元素脱离了正常文档流，容器的white-space: nowrap对它完全不起作用，容器无法计算所有float元素的总宽度，自然不会出现横向滚动条。

内容的提问来源于stack exchange，提问作者Daniel Więcek