在 CSS 中正確定位 div

Question

我有以下 divs 結構：

 .wrapper { display: flex; flex-wrap: wrap; font-size: 27px; max-width: 800px; } .wrapper div { display: flex; align-items: center; justify-content: center; } .a { width: 200px; height: 100px; } .b { width: 400px; height: 100px; }

 <div class='wrapper'> <div class='a' style="background: green">A</div> <div class='a' style="background: red">B</div> <div class='a' style="background: blue">C</div> <div class='b' style="background: yellow">D</div> <div class='a' style="background: pink">E</div> </div>

但是當沒有足夠的空間時，我會將其更改為：

我嘗試使用 flex，但它總是在D div 之后推E div。 尋求幫助

Answer 1

做這樣的事情：

 .fbox{ float: left; width:50%; height:100px; } .box-a{ background-color: red; text-align: center; color: #ffffff; } .box-b{ background-color: green; text-align: center; color: #ffffff; } .sbox{ float: left; width:50%; height:100px; } .box-c{ background-color: blue; text-align: center; color: #ffffff; } .box-d{ background-color: gray; text-align: center; color: #ffffff; } #third-one{ height:100px; width:100%; text-align: center; }

 <div class="boxes"> <div class="first-two"> <div class="fbox box-a"> a </div> <div class="fbox box-b"> b </div> </div> <div class="second-two"> <div class="sbox box-c"> c </div> <div class="sbox box-d"> d </div> </div> </div> <div id="third-one"> e </div>

Answer 2

我的例子有一個media query 。 為了實現期望的結果，則需要添加order 2由規則和拉伸flex: 100%為類b和類划分的塊a成使用兩列flex: 50%規則。

有必要嗎？

 .wrapper { display: flex; flex-wrap: wrap; font-size: 27px; max-width: 800px; } .wrapper div { display: flex; align-items: center; justify-content: center; } .a { width: 200px; height: 100px; } .b { width: 400px; height: 100px; } @media(max-width: 615px){ .b { order: 2; flex: 100%; } .a { flex: 50%; } }

 <div class='wrapper'> <div class='a' style="background: green">A</div> <div class='a' style="background: red">B</div> <div class='a' style="background: blue">C</div> <div class='b' style="background: yellow">D</div> <div class='a' style="background: pink">E</div> </div>

這是另一個具有最少media query解決方案，但您需要將max-width: 50%規則添加到a類；

 .wrapper { display: flex; flex-wrap: wrap; font-size: 27px; max-width: 800px; } .wrapper div { display: flex; align-items: center; justify-content: center; } .a { width: 200px; max-width: 50%; height: 100px; } .b { width: 400px; height: 100px; } @media(max-width: 615px){ .b { order: 2; } }

 <div class='wrapper'> <div class='a' style="background: green">A</div> <div class='a' style="background: red">B</div> <div class='a' style="background: blue">C</div> <div class='b' style="background: yellow">D</div> <div class='a' style="background: pink">E</div> </div>

Answer 3

order 也是一個解決方案，因為它是一個 flex 布局

來自之前的評論：

嘗試.b{ order:2;}將 D 設置在最后一個位置。

 * { margin: 0; padding: 0; box-sizing: border-box; } .wrapper { display: flex; flex-wrap: wrap; font-size: 27px; max-width: 800px; /* maybe useful here too */ justify-content: center; margin:auto; } .wrapper div { display: flex; align-items: center; justify-content: center; } .a { width: 200px; height: 100px; } .b { width: 400px; height: 100px; } @media screen and (max-width:600px) { .b { order: 2; } }

 <div class='wrapper'> <div class='a' style="background: green">A</div> <div class='a' style="background: red">B</div> <div class='a' style="background: blue">C</div> <div class='b' style="background: yellow">D</div> <div class='a' style="background: pink">E</div> </div>