выравнивание сетки - вертикальное выравнивание.Как сделать колонны с одинаковой высотой? - PullRequest
Новая
       12

выравнивание сетки - вертикальное выравнивание.Как сделать колонны с одинаковой высотой?

0 голосов
/ 20 ноября 2018

У меня есть страница (см. Вложение) вертикальное выравнивание

Вы можете видеть, что кнопка справа не выровнена с другой слева (из-за текста выше, имеющегоменьше строк)

Как сделать так, чтобы кнопка опускалась и выравнивалась с кнопкой слева?Я пробовал "align-items, flex-end, display: bottom и т. Д.", Но я не понимаю кодирование.Я не уверен, что речь идет о компоновке сетки, или мне может понадобиться обернуть вокруг кнопки ...

Спасибо за вашу помощь! 

.btn-add-to-cart {
    margin: 0 auto;
}
<div class="grid__item grid-product {{ grid_item_width }}{% if sold_out %} is-sold-out{% endif %}">
  <div class="grid-product__wrapper">
    <div class="grid-product__image-wrapper">
      <a class="grid-product__image-link" href="{{ product.url | within: collection }}">
        {% if product.featured_image.src == blank %}
          <img class="grid-product__image" src="{{ product.featured_image.src | img_url: '1024x' }}" alt="{{ product.featured_image.alt | escape }}">
        {% else %}
 <div class="reveal">
   
          {% include 'image-style' with image: product.featured_image, small_style: true, width: width, height: height, wrapper_id: img_wrapper_id, img_id_class: img_id_class %}
          <div id="{{ img_wrapper_id }}" class="product--wrapper">
            <div style="padding-bottom:{{ 1 | divided_by: product.featured_image.aspect_ratio | times: 100 }}%;">
              <img class="product--image lazyload {{ img_id_class }}"
                   src="{{ product.featured_image | img_url: '150x150' }}"
                   data-src="{{ img_url }}"
                   data-widths="[180, 370, 590, 740, 900, 1080, 1296, 1512, 1728, 2048]"
                   data-aspectratio="{{ product.featured_image.aspect_ratio }}"
                   data-sizes="auto"
                   alt="{{ product.featured_image.alt | escape }}">
             <img class="hidden" src="{{ product.images.last | img_url: 'grande' }}" alt="{{ product.images.last.alt | escape }}" />


              </div>
            </div>           
          </div>
 
          <noscript>
 <img class="grid-product__image" src="{{ product.featured_image.src | img_url: 'grande' }}" alt="{{ product.featured_image.alt | escape }}">
 </noscript>
        {% endif %}
      </a>
      {% if sold_out %}
        <div class="grid-product__sold-out">
          <p>{{ 'products.product.sold_out_html' | t }}</p>
        </div>
      {% elsif on_sale %}
        <div class="grid-product__on-sale">
  {% capture discount_percentage %}{{ product.compare_at_price | minus: product.price | times: 100 | divided_by: product.compare_at_price |round }}%{% endcapture %}
  <p>{{ 'products.general.save_html' | t: saved_amount: discount_percentage }}</p>
        </div>
      {% endif %}
    </div>

    <a href="{{ product.url | within: collection }}" class="grid-product__meta">
      <span class="grid-product__title">{{ product.title }}</span>
      <span class="grid-product__price-wrap">
        <span class="long-dash">—</span>
        <span class="grid-product__price">
          {% if product.price_varies %}
            {{ product.price_min | money_without_trailing_zeros }}
            <span class="icon-fallback-text">
              <span class="icon icon-plus grid-product__price-min" aria-hidden="true"></span>
              <span class="fallback-text">+</span>
            </span>
          {% else %}
            {{ product.price | money_without_trailing_zeros }}
          {% endif %}
        </span>
        
        {% if on_sale %}
          <span id="ComparePrice" class="product-single__price--compare-at">{{ product.compare_at_price | money }}</span>
          <span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
        {% else %}
          <span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
        {% endif %}
        </span>
      </span>
      {% if section.settings.product_vendor_enable %}
        <p class="grid-product__vendor">{{ product.vendor }}</p>
      {% endif %}
        
       <form method="post" action="/cart/add">
  <input type="hidden" name="id" value="{{ product.variants.first.id }}" />      
         
  <input type="submit" value="Add to bag" class="btn btn-add-to-cart" />
      <input type="hidden" name="return_to" value="back" />
</form> 
    </a>
  </div>
</div>

CSS: 

enter code here.btn-add-to-cart {
margin: 0 auto;

}

...