html - CSS - 定位多个相邻的 div 以在 2 个 div 之间堆叠一个

Question

<分区>

Answer 1

CSS 网格可以帮助您轻松解决这个问题。

.parent {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: [col1-start] 100px  [col2-start] 100px  [col3-start] 100px [col3-end];
  grid-template-rows: [row1-start] auto [row2-start] auto [row2-end];
}

.div1, .div2, .div3, .div4 {
  background-color: #444;
  color: #fff;
  padding: 20px;
}

.div1 {
  grid-column: col1-start;
  grid-row: row1-start / row2-end ;
}
.div2 {
  grid-column: col2-start ;
  grid-row: row1-start;
}
.div3 {
  grid-column: col2-start;
  grid-row: row2-start ;
}
.div4 {
  grid-column: col3-start ;
  grid-row: row1-start / row2-end ;
}

<div class="parent">
    <div class="div1">....</div>
    <div class="div2">....</div>
    <div class="div3">....</div>
    <div class="div4">....</div>
</div>

可以找到更多示例HERE .