CSS-定位多个相邻的div，以便在2个div之间彼此堆叠

Question

我面临的一个问题是，我需要使几个相邻的div定位到特定的位置：

它们的html布局位置彼此相邻：

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

我已经尝试过使用弹性盒，然后将Div1和Div4浮动出来，但是它不起作用。 我还需要根据Div2和Div3的内容将Div1和Div4的高度全部垂直对齐为其正确的动态高度。

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> 

在这里可以找到更多示例。

Answer 2

这是flexbox的一个想法：

 * { box-sizing:border-box; } .parent { display:flex; height:200px; flex-direction:column; flex-wrap:wrap; } .div1,.div4 { height:100%; width:20%; border:1px solid green; } .div2,.div3 { height:50%; width:60%; border:1px solid red; } 

 <div class="parent"> <div class="div1">1</div> <div class="div2">2</div> <div class="div3">3</div> <div class="div4">4</div> </div> 

Answer 3

我会这样：

 *{ margin: 0; border: 0; padding: 0; box-sizing: border-box; } .parent{ display: flex; padding: 15px; } .a, .b{ background: #ddd; margin: 10px; flex-basis: 20%; } .container{ width: 60%; } .container div{ background: #ddd; margin: 10px; } 

 <div class="parent"> <div class="a">div1</div> <div class="container"> <div>div</div> <div>div</div> </div> <div class="b">div2</div> </div>