移動和桌面視圖的 CSS 對齊方式不同

Question

我有這個布局：

 .biggest { height: 500px; width: 50%; background-color: teal; float: left; } .section1 { height: 200px; width: 50%; background-color: white; float: right; } .inside1 { height: 30px; width: 90%; background: deeppink; margin: 20px; } .inside2 { height: 30px; width: 90%; background: forestgreen; margin: 20px; }

 <div> <div class="biggest"></div> <div class="section1"> <div class="inside1"></div> <div class="inside2"></div> </div> </div>

我想按以下順序對齊框：移動視圖上的粉紅色、藍綠色和綠色。 怎么做？

白色的盒子是把里面的盒子放在一起。 我在以不同順序對齊列內的元素時遇到問題，因為列內的框無法分開。 如果有人知道如何做到這一點，解釋將是一個很大的幫助。

Answer 1

不幸的是，因為你對准他們這是不可能的，你把路.biggest之間.inside1和.inside2因為.biggest是他們父母的reletive .section1與簡單的HTML和CSS，你不能馬上顯示器是出.section1對於手機在.section1雖然有一種討厭的方式，我不推薦它你可以先用 js 做到這一點，你應該先獲取元素並將其保存在一個變量中，然后嘗試將其從它所在的位置刪除，然后將其添加到在.inside1旁邊，您也可以使用 jquery 並嘗試使用.inside1 .detach()和.append()來分離元素並將其附加到其他地方，您可以在此處閱讀有關它的更多信息

Answer 2

通過對移動屏幕使用網格布局和媒體查詢，您可以實現這一點。

 .grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 100px); grid-auto-rows: 100px; grid-gap: 10px; } .pink { background: pink; } .teal { background: teal; grid-row: 1 / -1 } .green { background: green; } @media only screen and (max-width: 480px) { .grid { grid-template-columns: 1fr; } .pink { grid-row: 1; } .teal { grid-row: 2; } }

 <div class="grid"> <div class="teal"></div> <div class="pink"></div> <div class="green"></div> </div>

我希望這可以幫助您解決問題。

這是codepen的鏈接。

Answer 3

當inside1和inside2位於不同的父容器中時，這是不可能的。 但是，一種解決方案是將所有三個元素都放在一個父容器下，然后使用 CSS Grid 構建兩列布局，並在不同的屏幕尺寸下重新排序。

這是一個 CodePen 演示： https ://codepen.io/samsonzhangthesalmon/pen/qBdgZdy

與@Prathamesh Kosht​​i 的答案不同，我的使用網格中的min-content保留了粉紅色和綠色塊的高度。

 .container { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: min-content minmax(min-content, 1fr); } .biggest { height: 500px; width: 100%; background-color: teal; grid-row: 1/3; } .inside1 { height: 30px; width: 100%; background: deeppink; margin: 20px; } .inside2 { height: 30px; width: 100%; background: forestgreen; margin: 20px; } @media (max-width: 600px) { /* example of mobile */ .container { grid-template-columns: 1fr; /* reset to one column. Better than doing this is to put the two-column line in a min-width: 600px query and go mobile-first, but for the sake of clarity I'll overwrite it here */ } .biggest { grid-row: 2/3; } }

 <div class='container'> <div class="biggest"></div> <div class="inside1"></div> <div class="inside2"></div> </div>

Answer 4

2件事：

1- 始終嘗試使用最簡單的 html 和 css - 使調試更容易 2- 這里有一個技巧。 請注意我必須如何重新排序 html 中的 div。 通過這種方式，我可以使用 float 屬性，但也可以按照正確的移動順序列出 div。

 body, html { margin: 0; padding: 0; } .biggest { height: 500px; width: 50%; background: teal; float: left; } .inside1, .inside2 { height: 200px; width: 50%; background: pink; float: right; margin-bottom: 100px; } .inside2{ background:green; } @media only screen and (min-width: 600px) { .biggest, .inside1, .inside2 { clear: both; width: 100%; margin-bottom: 100px; } }

 <div class="inside1"></div> <div class="biggest"></div> <div class="inside2"></div>