Отзывчивый ряд divs

Question

Я пытаюсь создать ряд divs, который будет охватывать ширину экрана. У div должна быть фиксированная высота и ширина, а divs - на другую, ширина экрана уже заполнена. Я также пытаюсь применить медиа-запросы, так что divs, когда на меньшем экране будет охватывать всю ширину.

Медиа запросы:

@media screen and (max-width:400px) { 
    .test { 
     display:inline-block; 
     width: 100% height:150px; 
     padding:10px; 
    } 
} 
@media screen and (min-width:599px) { 
    .test { 
     display:inline-block; 
     width: 30% height:150px; 
     padding:10px; 
    } 
} 
@media screen and (min-width:600px) { 
    .test { 
     display:inline-block; 
     width: 20% height:150px; 
     padding:10px; 
    } 
} 

Это то, что я до сих пор: https://jsfiddle.net/9deLmbps/

Как вы можете видеть ДИВ изменения высоты, когда имеется несколько строк текста в нем. Как я могу обеспечить, чтобы каждый div хранился на одной высоте, если у вас больше текста?

Answer 1

, возможно, вы ищете это:

.test{ 
    background-color: skyblue; 
    display:inline-block; 
    width: 150px; 
    height:100px; 
    overflow:hidden; 
} 

Я обновил свою скрипку для визуального опыта. jsfiddle:fixed width and height and divs will drop to another line the screen width has already been filled

Answer 2

вы написали

width: 100% height:150px; 

, но это должно быть

width: 100%; height:150px; 

же относится и к другим вхождениям

я обновил свою скрипку: https://jsfiddle.net/9deLmbps/1/

вы можете использовать вертикально- align: top для лучшего внешнего вида: https://jsfiddle.net/9deLmbps/2/