如何创建 2 个响应式列 div，以不同的屏幕尺寸堆叠在每个列的顶部？

Question

Updated question and provided more clarity:

How do I create two responsive divs that sit next to each other and stack on top of each other at different screen sizes? The dimensions are specific (each div is 350 x 217 px).

One div will have a text centred horizontally within the div but also left aligned and the other will be an image.

Below is the ideal end result. I'm a newbie to dev and this is for an assignment that's overdue. I've been fiddling around for the past couple of days and I keep going round in circles.

Responsive view on smaller screens:

 * { 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>

The image is 350 x 217. Here is the ideal look below:

The below screen is what I would like to achieve without changing the existing width and height of yellow div? How do I go about achieving that?

Answer 1

1. add display: grid to the parent element .row ;
2. add grid-template-columns: 1fr 1fr to the parent element ( .row ) to have a 2-column layout.
3. For screens at 600px or below you change the grid-template-columns to 1fr for the element .row to get a 1-column layout. To have both elements have the same height, you can use grid-auto-rows: 1fr on the parent element.
4. To maintain the normal block-level-behavior you add display: flex; flex-direction: column display: flex; flex-direction: column to the .left column. Flexbox will allow you do vertical center the text.
5. To vertical center the text you have to align it to the main-axis ( flex-direction: column ) with justify-content: center

 * { 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

Your question needs work.

You want the specific div widths to be 350px x 217px, but when you get to a min-width of 600px, that width of 350px isn't going to work anymore. You will struggle to have a responsive page if you set explicit heights and widths. You need to let elements fill their spaces naturally.

That said, I've created a solution that I think would work best based on the images you've provided.

 * { 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

Like mentioned above i would start with mobile view. You can create a parent div around your two boxes called container with the following css properties

display:flex flex-direction: column

Then add a media query set at the width you would like this divs to be side by side and change the flex direction on your container div to row

flex-direction: row