Выравнивание кнопок на странице в соответствии с приведенным выше текстом

Question

Добавить в корзину выравнивание

См. Изображение выше

Я пытаюсь получить кнопку «Добавить в корзину», чтобы выровнять ее с остальными в той же строке страницы. В настоящее время я знаю только о том, чтобы сделать это одним из двух способов:

1. Добавление пробела между одним из элементов для обеспечения правильного выравнивания
2. Установка фиксированной высоты для каждого элемента продукта

Проблема в том, что, когда текст становится длиннее и начинает переноситься (как показано на рисунке), кнопки на странице смещаются по вертикали.

Что было бы лучшим выбором в этой ситуации, и как я мог бы начать выполнение этой задачи?

HTML-разметка:

<article class="card ">
<figure class="card-figure">
    <div class="sale-badge animated bounceIn"><span>Sale</span></div>
    <a href="/olio-trevi-extra-virgin-olive-oil-500ml/" tabindex="0">
        <div class="card-img-container">
            <img class="card-image lazyautosizes lazyloaded" data-sizes="auto" src="https://cdn11.bigcommerce.com/s-zji14g4v8/images/stencil/180x180/products/949/1182/trevi__64427__36013.1544206184.jpg?c=2" data-src="https://cdn11.bigcommerce.com/s-zji14g4v8/images/stencil/180x180/products/949/1182/trevi__64427__36013.1544206184.jpg?c=2" alt="Olio Trevi Extra Virgin Olive Oil - 500ml" title="Olio Trevi Extra Virgin Olive Oil - 500ml" width="180" height="180" sizes="130px">
        </div>
    </a>
    <figcaption class="card-figcaption">
        <div class="card-figcaption-body">
            <a href="#" class="button button--primary button--icon quickview" data-product-id="949" data-title="Quick view" tabindex="0">
                <i class="icon">
                    <svg>
                        <use xlink:href="#icon-eye"></use>
                    </svg>
                </i>
            </a>
            <a href="/wishlist.php?action=add&amp;product_id=949" class="button button--primary button--icon wishlist" data-title="Add to Wish List" tabindex="0">
                <i class="icon">
                    <svg>
                        <use xlink:href="#icon-heart"></use>
                    </svg>
                </i>
            </a>
        </div>
    </figcaption>
</figure>
<div class="card-body">
    <h4 class="card-title">
        <a href="/olio-trevi-extra-virgin-olive-oil-500ml/" tabindex="0">Olio Trevi Extra Virgin Olive Oil - 500ml</a>
    </h4>
    <p data-test-info-type="summary">This fresh, fruity, and intensely green Umbrian olive oil has been produced in the Trevi hillsides for 2,000 years. The production techniques are not …</p>
    <p class="card-text" data-test-info-type="productRating">
        <span class="rating--small">
            <span class="icon icon--ratingEmpty">
                <svg>
                    <use xlink:href="#icon-star"></use>
                </svg>
            </span>
            <span class="icon icon--ratingEmpty">
                <svg>
                    <use xlink:href="#icon-star"></use>
                </svg>
            </span>
            <span class="icon icon--ratingEmpty">
                <svg>
                    <use xlink:href="#icon-star"></use>
                </svg>
            </span>
            <span class="icon icon--ratingEmpty">
                <svg>
                    <use xlink:href="#icon-star"></use>
                </svg>
            </span>
            <span class="icon icon--ratingEmpty">
                <svg>
                    <use xlink:href="#icon-star"></use>
                </svg>
            </span>
            <!-- snippet location product_rating -->
        </span>
    </p>
    <div class="card-text" data-test-info-type="price">
        <div class="price-section non-sale-price---withoutTax price-section--withoutTax ">
            <span class="price-was-label">Was:</span>
            <span data-product-non-sale-price-without-tax="" class="price price--rrp"> $29.99</span>
        </div>
        <div class="price-section">
            <span class="price-now-label">
            Now:
            </span>
            <span data-product-price-without-tax="" class="price price--withoutTax"> $25.99</span>
        </div>
    </div>
    <a href="/olio-trevi-extra-virgin-olive-oil-500ml/" class="button button--primary button--cartAction" data-product-id="949" tabindex="0">Choose Options</a>
</div>

CSS-разметка (.card-title)

.card-title {
    font-size: 1rem;
    margin: 0 0 1rem;
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

CSS-разметка (.card)

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: $fff;
    background-clip: border-box;
    border: 1px solid;
    border-radius: 0.25rem;
}

Answer 1

Изменение размеров изображений продукта до одинаковой высоты позволит исправить выравнивание без использования CSS.

В качестве альтернативы, установка минимальной высоты, равной самому высокому изображению на всех изображениях, должна выровнять все элементы.

Answer 2

Я рекомендую вам присвоить вашим картам определенную высоту, разделить содержимое карты на 3 части: изображение / содержимое / кнопка (добавить в автомобиль), назначить следующие свойства родительскому контейнеру этих 3 элементов:

.card-wrapp {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}

и тогда вам нужно будет присвоить заголовку определенный размер, так как это может стать очень длинным, вы можете добавить:

.card__title {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Answer 3

Я бы попробовал это с flexbox, используя растяжение элементов выравнивания (минимальная / максимальная высота для продуктов) и выравнивание снизу вашей ссылки добавления в корзину.

https://css -tricks.com / сниппеты / CSS / а-руководство к Flexbox /

Answer 4

Лучше установить фиксированную высоту для блока перед кнопкой или сделать позицию для кнопки, связанной с основным блоком, используя опцию css «позиция» для блока продукта как «относительная» и для кнопки как «абсолютная» и установить ее в нижнюю часть (снизу: 0 ;). Вы можете прочитать больше здесь: https://www.w3schools.com/css/css_positioning.asp

Answer 5

Добавление пробелов не является правильным решением. Установка той же фиксированной высоты будет работать, у вас есть возможность поиграть с «margin», «padding» и «line-height» для достижения желаемых результатов.