0
A
回答
1
您可以用Flexbox的做(如果設置父固定的高度,例如100vh),但在這種情況下,這樣做的首選方法是用電網:
* {margin:0;padding:0;box-sizing:border-box}
html, body {width:100%}
#container {
display: grid;
grid-template-columns: 1fr 1fr; /* makes two columns, can also use 50% 50%, repeat(2, 1fr) or repeat(2, 50%), fr stands for fractions */
grid-auto-rows: 150px; /* adjust or don't use at all, not mandatory */
grid-gap: 5px 0; /* adjust, atm. 5px vertical gap, 0px horizontal */
color: #fff;
font-size: 4em;
font-weight: bold;
text-align: center;
}
#container > div:nth-child(2) { /* can also use :nth-of-type(2) */
grid-column: 1; /* puts the blue one in the left column */
grid-row: 1/3; /* span two rows */
}
@media screen and (max-width: 568px) { /* adjust */
#container {
grid-template-columns: 1fr; /* makes one column, can also use 100% */
grid-gap: 0;
}
#container > div:nth-child(2) {
grid-row: 2; /* puts it back where it belongs */
}
}
<div id="container">
<div style="background: green">1</div>
<div style="background: blue">2</div>
<div style="background: red">3</div>
</div>
至於替代,您可以採取的定位優勢:
* {margin:0;padding:0;box-sizing:border-box}
html, body {width:100vw;height:100vh} /* viewport units */
#container {
position: relative; /* needs to be on the parent */
height: 100%;
color: #fff;
font-size: 4em;
font-weight: bold;
text-align: center;
}
#container > div {
position: absolute; /* needs to be on the children */
}
#container > div:first-child {
top: 0;
right: 0;
width: 50%;
height: 147.5px; /* -2.5px for the vertical gap */
}
#container > div:nth-child(2) {
top: 0;
left: 0;
width: 50%;
height: 300px;
}
#container > div:nth-child(3) { /* can also use the :last-child */
top: 152.5px; /* height of the :first-child + 5px */
right: 0;
width: 50%;
height: 147.5px; /* -2.5px for the vertical gap */
}
@media screen and (max-width: 568px) {
#container > div {position:static}
#container > div:first-child,
#container > div:nth-child(2),
#container > div:nth-child(3) {
width: 100%;
height: 150px;
}
}
<div id="container">
<div style="background: green">1</div>
<div style="background: blue">2</div>
<div style="background: red">3</div>
</div>
+0
有_many_ dupe可供選擇:) – LGSon
相關問題
- 1. flexbox四平鋪佈局
- 2. Flexbox拼貼網格佈局
- 3. white-space:nowrap打破flexbox佈局
- 4. 用flexbox設置佈局
- 5. Flexbox佈局對齊內容
- 6. Flexbox響應式佈局
- 7. Flexbox 4項目佈局
- 8. Doctype中斷flexbox佈局
- 9. Flexbox的響應行列布局
- 10. Flexbox的佈局查詢,行分列
- 11. 「聖盃」使用flexbox的三列布局
- 12. 長文本打破我的flexbox佈局
- 13. 用於頁面佈局的Flexbox?
- 14. 固定div的兩列flexbox佈局
- 15. Safari 8中的Flexbox佈局突破
- 16. Flexbox的欄佈局響應與列重新排序沒有固定的高度
- 17. CSS Flexbox響應式佈局和%寬度
- 18. 如何使用flexbox編寫此佈局?
- 19. Flexbox響應式佈局對齊
- 20. Flexbox的佈局 - 多行如果有足夠長的
- 21. 在flexbox佈局中疊加div div
- 22. 我如何寫這個CSS Flexbox佈局?
- 23. 角材料聖盃flexbox佈局
- 24. 具有多個側邊欄的Flexbox響應式佈局
- 25. EXT JS佈局XHTML
- 26. JS條件佈局
- 27. 沒有佈局的條件佈局和動作緩存
- 28. Cytoscape佈局 - 沒有這樣的佈局可樂發現
- 29. Flexbox佈局。無法將相框的寬度設置爲
- 30. 刪除flexbox佈局中的行之間的大差距
的又一可能複製https://stackoverflow.com/questions/41790378/css-flexbox-group-2-flex-items?rq=1 – LGSon
而另一個鏈接到一個問題,沒有一個公認的答案。也許我們這次可以找到答案,並在將來繼續關聯這個問題? :) – Aydin4ik
只是因爲一個答案沒有接受,並不意味着它不能被鏈接,只要鏈接的答案(s)有一個解決方案:) – LGSon