如何让设置position:absolute的div列表横向并排显示？

在无法改动HTML结构的前提下，要让多个position: absolute的.outside-div横向并排显示在grid容器外部，可通过以下CSS调整实现：

原示例代码 #

CSS

.container {
  max-width:600px;
  margin: 20px auto;
  position:relative;
}

.grid {
  display:grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 1.5rem;
}

.col {
  background:pink;
  padding:15px
}

.outside-div {
  position:absolute;
  bottom:-30px;
  left:0;
}

HTML

<div class="container">
  <div class="grid">
    <div class="col">
      <div>Other content</div>
      <div class="outside-div">Outside div one</div>
    </div>
    <div class="col">
      <div>Other content</div>
      <div class="outside-div">Outside div two</div>
      <div class="outside-div">Outside div three</div>
    </div>
  </div>
 </div>

解决方案 #

修改CSS样式，让绝对定位元素具备横向排列特性：

.container {
  max-width:600px;
  margin: 20px auto;
  position:relative;
  white-space: nowrap; /* 强制元素在一行横向排列 */
}

.grid {
  display:grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 1.5rem;
}

.col {
  background:pink;
  padding:15px
}

.outside-div {
  position:absolute;
  bottom:-30px;
  left: auto; /* 取消固定左偏移，让元素自然排列 */
  display: inline-block; /* 将绝对定位元素转为行内块级，支持横向排列 */
  margin-right: 15px; /* 可选：添加元素间距 */
  white-space: normal; /* 保留元素内部文本换行能力 */
}

关键原理 #

• 绝对定位元素默认是块级，设置display: inline-block后会像行内元素一样依次横向排列；
• white-space: nowrap确保所有.outside-div不会因容器宽度限制换行；
• left: auto移除固定左偏移，让元素根据前一个元素的位置自动调整自身位置，避免重叠。

内容的提问来源于stack exchange，提问作者ells157