Установите высоты div, чтобы они были такими же самыми высокими, сохраняя отзывчивый макет.

Question

У меня есть очень простая страница с серией divs, которые сидят рядом друг с другом, содержащие изображение и некоторый текст. Ориентация изображения и различного количества текста означает, что каждый div заканчивается разной высотой. Не удалось вручную установить высоту, есть ли способ, чтобы каждый div соответствовал высоте самого высокого, сохраняя при этом отзывчивый макет? Я попробовал обернуть их в контейнер и использовать display: flex, который сделал трюк, но он убил гибкий макет - divs больше не позволяли сбрасывать их ширину в зависимости от размера браузера, и поэтому страница не будет правильно переплавлять.

Я нашел несколько примеров jquery в Интернете, но мне не удалось заставить их работать, по причинам, без ведома для меня. Я всегда могу попробовать снова, если у кого-то есть решение.

Основной макет страницы в настоящее время:

@charset "utf-8"; 
 

 
* { 
 
    box-sizing: border-box; 
 
} 
 
[class*="col-"] { 
 
    float: left; 
 
    padding: 15px; 
 
    border: 1px solid red; 
 
    text-align: center; 
 
} 
 
.clear { 
 
    clear: both 
 
} 
 
html { 
 
    font-family: Verdana, Geneva, sans-serif; 
 
} 
 
p { 
 
    font-size: 11px 
 
} 
 
a, 
 
a:hover, 
 
a:active, 
 
a:visited { 
 
    color: #ffffff; 
 
} 
 
a.textlink, 
 
a.textlink:hover, 
 
a.textlink:active, 
 
a.textlink:visited { 
 
    color: #000000; 
 
} 
 
/* For mobile phones: */ 
 

 
[class*="col-"] { 
 
    width: 100%; 
 
} 
 
@media only screen and (min-width: 600px) { 
 
    /* For tablets: */ 
 
    .col-m-1 { 
 
    width: 50%; 
 
    } 
 
} 
 
@media only screen and (min-width: 768px) { 
 
    /* For desktop: */ 
 
    .col-1 { 
 
    width: 20%; 
 
    } 
 
} 
 
img { 
 
    max-width: 100%; 
 
    height: auto; 
 
}

<div class="container"> 
 
    <div class="col-1 col-m-1"> 
 
    <img src="some/image/path" /><br /> 
 
    Some text<br />And more text 
 
    </div> 
 
    <div class="col-1 col-m-1"> 
 
    <img src="some/image/path" /><br /> 
 
    Some text<br />And more text 
 
    </div> 
 
    <div class="col-1 col-m-1"> 
 
    <img src="some/image/path" /><br /> 
 
    Some text<br />And more text 
 
    </div> 
 
    <div class="col-1 col-m-1"> 
 
    <img src="some/image/path" /><br /> 
 
    Some text<br />And more text 
 
    </div> 
 
    <div class="col-1 col-m-1"> 
 
    <img src="some/image/path" /><br /> 
 
    Some text<br />And more text 
 
    </div> 
 
    <!-- and so on. The divs will, once I have this layout sorted, be 
 
    populated by XML/XSL and could be anywhere from 1 to over 200 of them. --> 
 
</div>

Я обнаружил, что без отдельного класса Col-м-1, макет планшета на основе не будет работать. (Я не особенно разбираюсь в гибкой компоновке, поэтому я следил за учебниками W3C, которые рекомендовали этот способ сделать это)

Answer 1

Вы были на правильном пути с помощью flex - я думаю, что все, что вы пропустили, добавляло гибкую обертку в ваш контейнер :

@charset "utf-8"; 
 

 
/* CSS Document */ 
 

 
.container { 
 
    display: flex; 
 
    flex-direction: rows; 
 
    flex-wrap: wrap; 
 
} 
 
* { 
 
    box-sizing: border-box; 
 
} 
 
[class*="col-"] { 
 
    padding: 15px; 
 
    border: 1px solid red; 
 
    text-align: center; 
 
} 
 
.clear { 
 
    clear: both 
 
} 
 
html { 
 
    font-family: Verdana, Geneva, sans-serif; 
 
} 
 
p { 
 
    font-size: 11px 
 
} 
 
a, 
 
a:hover, 
 
a:active, 
 
a:visited { 
 
    color: #ffffff; 
 
} 
 
a.textlink, 
 
a.textlink:hover, 
 
a.textlink:active, 
 
a.textlink:visited { 
 
    color: #000000; 
 
} 
 
/* For mobile phones: */ 
 

 
[class*="col-"] { 
 
    width: 100%; 
 
} 
 
@media only screen and (min-width: 600px) { 
 
    /* For tablets: */ 
 
    .col-m-1 { 
 
    width: 50%; 
 
    } 
 
} 
 
@media only screen and (min-width: 768px) { 
 
    /* For desktop: */ 
 
    .col-1 { 
 
    width: 20%; 
 
    } 
 
} 
 
img { 
 
    max-width: 100%; 
 
    height: auto; 
 
}

<div class="container"> 
 
    <div class="col-1 col-m-1"> 
 
    <img src="some/image/path" /> 
 
    <br />Some text 
 
    <br />And more text 
 
    <br />And more text</div> 
 
    <div class="col-1 col-m-1"> 
 
    <img src="some/image/path" /> 
 
    <br />Some text 
 
    <br />And more text</div> 
 
    <div class="col-1 col-m-1"> 
 
    <img src="some/image/path" /> 
 
    <br />Some text 
 
    <br />And more text</div> 
 
    <div class="col-1 col-m-1"> 
 
    <img src="some/image/path" /> 
 
    <br />Some text 
 
    <br />And more text</div> 
 
    <div class="col-1 col-m-1"> 
 
    <img src="some/image/path" /> 
 
    <br />Some text 
 
    <br />And more text</div> 
 
    <div class="col-1 col-m-1"> 
 
    <img src="some/image/path" /> 
 
    <br />Some text 
 
    <br />And more text 
 
    <br />And more text</div> 
 
    <div class="col-1 col-m-1"> 
 
    <img src="some/image/path" /> 
 
    <br />Some text 
 
    <br />And more text</div> 
 
    <div class="col-1 col-m-1"> 
 
    <img src="some/image/path" /> 
 
    <br />Some text 
 
    <br />And more text</div> 
 
    <div class="col-1 col-m-1"> 
 
    <img src="some/image/path" /> 
 
    <br />Some text 
 
    <br />And more text</div> 
 
    <div class="col-1 col-m-1"> 
 
    <img src="some/image/path" /> 
 
    <br />Some text 
 
    <br />And more text</div> 
 
</div>

Я добавил контейнерный класс выше и удаляется поплавок слева от Col класса