Как сделать два столбца одинаковой высоты, различные ширины, которые отзывчивы? ⇐ CSS

[Anonymous]

Я бы хотел получить подачу, в котором каждая строка имеет два столбца одинаковой высоты: < /p>
Контейнер подачи: ширина составляет 100%< /p>
column1 = изображение фиксированной ширины, скажем, 300px шириной < /p>
column2 = некоторые текст, как все, что остается из колонны 1 < /p>
. alt = "Введите описание изображения здесь" src = "https://i.sstatic.net/pbqhrkof.jpg"/>
Опять же, эти столбцы будут равной высотой, так же высокой, как изображение, и все изображения будут иметь стандартную высоту, скажем, высотой 100px. сложенное. Изображение будет на 100% шириной, и текст, который идет с ним, будет под изображением, а также на 100% шириной. Должен ли я даже иметь дело с CSS GRID? Будет ли гибкость лучше? Или что -то еще? Как мне это сделать? У меня есть некоторые проблемы с выяснением, как манипулировать сеткой CSS. < /P>

Код: Выделить всё

.story {
width: 100%;
display: grid;
grid-template-columns: 1fr 6fr;
grid-auto-rows: 1fr;
padding: 10px 20px 0 20px;
/*grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
grid-gap: 0rem;*/

z-index: 5;
}

.story-img {
/*object-fit: cover;*/
border: 1px solid green;
}

.story-img img {
height: 100%;
width: auto;
}

.story-squib {
/*padding: 10px 20px;*/
background-color: #eae9e1;
overflow: hidden;
border: 1px solid black;

}

.story-head {
font-family: 'Montserrat';
color: #4a5831;
margin-bottom: 10px;
font-weight: bold;
font-size: 2rem;
margin: 20px;

}

.story-body, .story-date {
font-family: 'Montserrat';
color: #96968a;
font-weight: 600;
font-size: 1rem;
margin: 20px;
}

.story-date {
margin-bottom: 10px;
}< /code>
[url=https://www.post-gazette.com/sports/jason-mackey/2025/04/07/nfl-free-agency-aaron-rodgers-pat-mcafee-show/stories/202504060108]



[img]//newsinteractive.post-gazette.com/.test2/img/oakmont1.jpg[/img]

Headline
April 20, 2025



[/url]

[url=https://www.post-gazette.com/sports/paul-zeise/2025/04/07/nil-house-ncaa-settlement-pitt/stories/202504030112]



[img]//newsinteractive.post-gazette.com/.test2/img/khamil-bailey-1200x929.jpg[/img]

Headline
April 18, 2025



[/url]

[url=https://www.post-gazette.com/sports/jason-mackey/2025/04/07/nfl-free-agency-aaron-rodgers-pat-mcafee-show/stories/202504060108]



[img]//newsinteractive.post-gazette.com/.test2/img/pittsburgh-skyline.jpg[/img]

Headline
April 20, 2025



[/url]

[url=https://www.post-gazette.com/sports/paul-zeise/2025/04/07/nil-house-ncaa-settlement-pitt/stories/202504030112]



[img]//newsinteractive.post-gazette.com/.test2/img/pga.jpg[/img]

Headline
April 18, 2025



[/url]

Подробнее здесь: https://stackoverflow.com/questions/796 ... e-responsi