css 在列表中将绝对div彼此相邻放置

qhhrdooz 于 2023-03-20 发布在其他

关注(0)|答案(1)|浏览(126)

有没有办法让一个div列表在绝对定位的情况下并排显示？
在我的情况下，我无法控制标记，并且div需要全部位于其网格容器之外，因此位置为：absolute。在下面的示例中，我希望“outside div”全部位于彼此旁边。

.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;
}

<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

来源：https://stackoverflow.com/questions/75739073/position-absolute-divs-next-to-each-other-in-list

1条答案

按热度按时间

yk9xbfzb1#

.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;
}

.row {
  display: flex
}

<div class="container">
  <div class="grid">
<div class="col" style="position: relative;">
  <div>Other content</div>
  <div class="outside-div row">
    <div>Outside div one</div>
  </div>
</div>
<div class="col" style="position: relative;">
  <div>Other content</div>
  <div class="outside-div row">
    <div>Outside div two</div>
    <div>Outside div three</div>
  </div>
</div>
  </div>
</div>

赞(0）回复(0）举报 2023-03-20

我来回答

css 在列表中将绝对div彼此相邻放置

1条答案

相关问题

热门标签

最新问答