Универсальный (резиновый) Размер Блоков

Тема в разделе "Общие вопросы", создана пользователем фдлщк, 12 янв 2018.

  1. TopicStarter Overlay
    Offline

    фдлщк

    Сообщения:
    455
    Симпатии:
    2.113
    Репутация:
    117
    Доброго дня всем!
    бесит и раздражает разный размер блоков товаров в категориях и тому подобных страницах!
    Поясню ситуацию при редактирование или добавлении новых данных к товарам (акции ,краткое описание,количество отзывов т.п. ) происходит растягивание блока товара по высоте что не очень приглядно выглядит на странице!!!! И не очень удобно каждый раз контролировать и редактировать Css для симметричного отображения блоков.
    Есть ли у кого какие мысли как сделать все блоки автоматически выравниваемые по максимальному или с "поддавливания" более высокого к примеру за счет описания.
     
  2. Offline

    wptour Пользователь

    Сообщения:
    13
    Симпатии:
    41
    Репутация:
    114
    Вот одно из решение предложенных на оф форуме опенкарт'а
    В footer.tpl, перед </body>
    HTML:
    <script>var highest = 0;
    
            function sortNumber(a, b) {
                return a - b;
            }
    
            var maxHeight = function () {
                var heights = [],
                    grid = $('.caption');//this is the part that changes in height. change to suit your needs
    
                grid.each(function () {
                    $(this).css('height', 'auto');
                    heights.push($(this).height());
                    heights = heights.sort(sortNumber).reverse();
                });
                highest = heights[0];
                grid.each(function () {
                    $(this).css('height', highest);
                });
    
            };
            $('#grid-view,#list-view').click(function () {
                maxHeight();
            });
            $(window).resize(maxHeight());</script>
    

    А так конечно в самом css лучше:
    используя подобные способы:
    HTML:
    .product-thumb .caption {
        padding: 0 20px;
      /*min-height: 180px; for longer names*/
      min-height: 220px;
    }
    
    @media (max-width: 1200px) {
    .product-grid .product-thumb .caption {
        min-height: 220px;
        padding: 0 10px;
        
    Источник там же где то)) где и предыдущий))
    Попробуй поиграть с min-height / max-height

    Второй вариант подходит если по макс. высоте блока выровнить все, а так конечно бы видеть шаблон или скрин(ы), что бы представить насколько все критично и какой вариант лучше
     
    admin нравится это.
  3. TopicStarter Overlay
    Offline

    фдлщк

    Сообщения:
    455
    Симпатии:
    2.113
    Репутация:
    117
    @wptour, Спасибо за наводку со скриптом! Уже ближе к желаемому результату, блоки по внешней границе выравнивает отлично нет неприятной визуальной осимметричность! непонятно почему досих пор в движках такие мелочи не предусмотрены.
     
  4. Offline

    wptour Пользователь

    Сообщения:
    13
    Симпатии:
    41
    Репутация:
    114
    Потому что не каждому то или иное решение по душе, кто-то наоборот предпочитает все делать валидой версткой строго на css, а такой костыль "из коробки" многих бы расстроил)