如何創建 2 個響應式列 div，以不同的屏幕尺寸堆疊在每個列的頂部？

Question

更新了問題並提供了更清晰的信息：

如何創建兩個彼此相鄰並以不同屏幕尺寸堆疊在一起的響應式 div？ 尺寸是特定的（每個 div 為 350 x 217 像素）。

一個 div 將有一個文本在 div 內水平居中但也左對齊，另一個將是圖像。

下面是理想的最終結果。 我是開發新手，這是一個過期的任務。 在過去的幾天里，我一直在擺弄，我一直在轉圈。

小屏幕上的響應式視圖：

 * { box-sizing: border-box; }.column { flex: 1; }.left { background-color: #e0e620; }.center { margin: auto; border: 3px solid green; padding: 50px 50px; }.right { background-color: #E5E5E5; }.row { display: flex; } img { width: 100%; display: block; } @media screen and (max-width: 600px) {.row { width: 100vw; display: block; }

 <div class="row"> <div class="column left"> <div class="center">The Info.<br /> <a class="link-button-green" href="" title="Info guide">Download now</a> </div> </div> <div class="column right"> <img src="https://via.placeholder.com/350x217.jpg"> </div> </div>

圖像為 350 x 217。下面是理想的外觀：

下面的屏幕是我想在不改變黃色 div 的現有寬度和高度的情況下實現的？ 我該如何實現這一目標？

Answer 1

1. 將display: grid添加到父元素.row ；
2. 將grid-template-columns: 1fr 1fr到父元素 ( .row ) 以具有 2 列布局。
3. 對於 600px 或以下的屏幕，您將元素.row的grid-template-columns更改為1fr以獲得 1 列布局。 要讓兩個元素具有相同的高度，您可以在父元素上使用grid-auto-rows: 1fr 。
4. 要保持正常的塊級行為，請添加display: flex; flex-direction: column display: flex; flex-direction: column到.left列。 Flexbox 將允許您將文本垂直居中。
5. 要使文本垂直居中，您必須使用justify-content: center將其與主軸（ flex-direction: column ）對齊

 * { box-sizing: border-box; }.row { display: grid; grid-template-columns: 1fr 1fr; } @media only screen and (max-width: 600px) {.row { grid-template-columns: 1fr; grid-auto-rows: 1fr; } }.left { background-color: yellow; display: flex; flex-direction: column; justify-content: center; } img { width: 100%; display: block; object-fit: contain; }

 <div class="row"> <div class="column left"> <div class="center">The Info.<br /> <a class="link-button-green" href="" title="Info guide">Download now</a> </div> </div> <div class="column right"> <img src="https://via.placeholder.com/350x217.jpg"> </div> </div>

Answer 2

你的問題需要解決。

您希望特定的 div 寬度為 350px x 217px，但是當您達到 600px 的最小寬度時，350px 的寬度將不再起作用。 如果您設置明確的高度和寬度，您將很難擁有一個響應式頁面。 你需要讓元素自然地填充它們的空間。

也就是說，我已經創建了一個我認為基於您提供的圖像效果最好的解決方案。

 * { box-sizing: border-box; margin: 0; padding: 0; } img { max-width: 100%; height: auto; }.container { display: flex; flex-direction: column; } @media screen and (min-width: 600px) {.container { flex-direction: row; min-height: 217px; } }.inner { background-color: #E0E61F; display: flex; justify-content: center; align-items: flex-start; flex-direction: column; width: 100%; min-height: 217px; }.inner span { padding-left: 1rem; min-height: unset; }.inner img { min-height: 217px; object-fit: cover; }

 <div class="container"> <div class="inner"> <span><a href="#">The Info</a></span> <span>Download Now</span> </div> <div class="inner"> <img src="https://placekitten.com/1600/900" alt=""> </div> </div>

Answer 3

如上所述，我將從移動視圖開始。 您可以使用以下 css 屬性在稱為container的兩個框周圍創建父 div

display:flex flex-direction: column

然后在您希望此 div 並排的寬度處添加一個媒體查詢集，並將容器 div 上的 flex 方向更改為 row

flex-direction: row