Как разместить блоки с одинаковой высотой и разной шириной?

Question

[dev400]

Подскажите пожалуйста решение, что бы блоки растягивались в пределах контейнера(контейнер к примеру 980px)? То есть в контейнере может быть 3 блока, а может быть и 5(в зависимости от их ширины).

Вот пример верстки одного блока:

<li>

                        <a class="catalog-element-link" href="#">

                            <div style="background-image: url();"  class="img">
                                <div class="hover-view">Быстрый просмотр</div>
                            </div>

                            <div class="code">213575454</div>

                            <div class="price red">500</div>
                            <div class="old-price">1000</div>

                        </a>

                    </li>

Answer 1

[Денис Т]

попробуй флексами

Answer 2

[Павел Романов]

Если вам не требуется поддержка старых версий IE, то используйте flex:

.container {
    display: flex;
    flex-wrap: wrap;
}
.element {
    flex-grow: 1;
}