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>