使用Shopify商店中cart.liquid的CSS更改位置[关闭]

Question

关闭。此问题需要debugging details。它当前不接受答案。

---

是否要改善此问题？ Update the question，因此堆栈溢出为on-topic。

已关闭1分钟前。

我是CSS的新手。现在，我正在建立Shopify商店，并尝试更改card.liquid中“区域”的位置（附照片！）。

“区域”应该在右边。任何想法吗？

非常感谢！安雅

Shopify

I think! this is the area

我认为是这个：

<footer class="cart__footer">
      <div class="grid">
        <div class="grid__item large-up--one-half">
        </div>
        <div class="grid__item text-center large-up--one-half large-up--text-right">

          {%- if cart.cart_level_discount_applications != blank -%}
            <div class="order-discount-cart-wrapper">
              {%- for discount_application in cart.cart_level_discount_applications -%}
                <span class="order-discount order-discount--title order-discount--cart">
                  {%- include 'icon-saletag' -%}<span class="visually-hidden">{{ 'customer.order.discount' | t }}:</span>{{- discount_application.title -}}
                </span>
                <span class="order-discount order-discount--cart">-{{ discount_application.total_allocated_amount | money }}</span>
              {%- endfor -%}
            </div>
          {%- endif -%}

          <p>
            <span class="cart__subtotal-title h3">{{ 'cart.general.subtotal' | t }}</span>
            <span class="cart__subtotal h3">{{ cart.total_price | money }}</span>

          </p>

          {%- capture taxes_shipping_checkout -%}
            {%- if shop.taxes_included and shop.shipping_policy.body != blank -%}
              {{ 'cart.general.taxes_included_and_shipping_policy_html' | t: link: shop.shipping_policy.url }}
            {%- elsif shop.taxes_included -%}
              {{ 'cart.general.taxes_included_but_shipping_at_checkout' | t }}
            {%- elsif shop.shipping_policy.body != blank -%}
              {{ 'cart.general.taxes_and_shipping_policy_at_checkout_html' | t: link: shop.shipping_policy.url }}
            {%- else -%}
              {{ 'cart.general.taxes_and_shipping_at_checkout' | t }}
            {%- endif -%}
          {%- endcapture -%}

          <p class="cart__policies txt--emphasis rte">{{ taxes_shipping_checkout }}</p>
          <p>
            <button type="submit" name="update" class="btn btn--secondary update-cart">
              {% include 'icon-update' %}
              <span class="icon__fallback-text">{{ 'cart.general.update' | t }}</span>
            </button>
            <a class="btn btn--secondary" href="{{ routes.all_products_collection_url }}">{{ 'cart.general.continue_shopping' | t }}</a>
          </p>
          <p>
            <button type="submit" name="checkout" class="btn">{{ 'cart.general.checkout' | t }}</button>
          </p>
        </div>
      </div>
    </footer>
  </form>
{% else %}
{% comment %}
  The cart is empty
{% endcomment %}
  <div id="EmptyCart">
    <h1>{{ 'cart.general.title' | t }}</h1>
    <p class="cart--empty-message">{{ 'cart.general.empty' | t }}</p>
    <p class="cart--continue-message">{{ 'cart.general.continue_browsing_html' | t: link: routes.all_products_collection_url }}</p>
    <p class="cart--cookie-message">{{ 'cart.general.cookies_required' | t }}</p>
  </div>
{% endif %}

Answer 1

这是一种可行的方法。将large-up--push-one-half类添加到包装div中。因此，替换

<div class="grid__item text-center large-up--one-half large-up--text-right">

带

<div class="grid__item text-center large-up--one-half large-up--push-one-half large-up--text-right">

这应将该div推到右侧。

希望有所帮助。

干杯！ 🍻