在购物车页面 woocommerce 中显示 div 内联答案

【问题标题】：Show divs inline in cart page woocommerce在购物车页面 woocommerce 中显示 div 内联
【发布时间】：2019-06-03 18:04:04
【问题描述】：

我一直在尝试让我的购物车页面中的两个盒子并排显示。购物车摘要和购物车总数。

我尝试为每个类指定不同的宽度，但我无法正确设置。

也尝试显示内联，但没有任何反应。

我将留下一个指向 product page 的链接，以便您将其添加到购物车，然后您将被重定向到购物车页面。

【问题讨论】：

标签： php css wordpress woocommerce

【解决方案1】：

https://i.imgur.com/Ye1FMTT.png

@media screen and (min-width: 1024px) {
    .woocommerce-cart form.woocommerce-cart-form, .cart-collaterals {
        display: inline-block;
        float: none;
        vertical-align: top;
        width: 49% !important;
        width: calc(50% - 2px) !important;
    }

    .woocommerce-cart .cart_totals {
        float: none !important;
        width: 100% !important;
        margin-left: 1px;
    }
}

【讨论】：

谢谢你，贝内里斯。怎么联系你？

【解决方案2】：

快速解决方案可能如下所示：

<form class="woocommerce-cart-form" action="https://test1.wpdevcloud.com/carrito/" method="post" 
    style="width: 66%; float: left;">
... 
</form>

<div class="cart-collaterals" style="width: 33%;float: left;">
    <div class="cart_totals " style="width: 100%;">
    ...
    </div>
</div>

这可以用 flexbox 等更好地完成，但需要更多的编辑。

【讨论】：

【解决方案3】：

你可以使用 flexbox，只需替换下面的代码

.woocommerce-cart form.woocommerce-cart-form, .cart-collaterals {
    display: inline-block;
    float: none;
    vertical-align: top;
    width: 49% !important;
    width: calc(50% - 2px) !important;
}

与

.woocommerce{
    display: flex;
}

.woocommerce-cart .woocommerce-cart-form {
    width: 60% !important;
    margin-right: 5px;
}

.cart-collaterals {
    width: 40% !important;
}

弹性盒子非常好用。

【讨论】：