在大屏幕上显示 <div> 时遇到问题

Question

我正在设计我的 woocommerce 商店的购物车，现在花了几个小时试图将侧边栏安装在右侧。

我已经像这样编辑了 woocommerce 的 cart.php：

    <div class="cart-wrapper">
<div class="cart-inner">
<?php
/**
 * Cart Page
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/cart/cart.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see     https://docs.woocommerce.com/document/template-structure/
 * @package WooCommerce/Templates
 * @version 3.8.0
 */

defined( 'ABSPATH' ) || exit;

$row_classes     = array();
$main_classes    = array();
$sidebar_classes = array();

$auto_refresh  = get_theme_mod( 'cart_auto_refresh' );
$row_classes[] = 'row-large';
$row_classes[] = 'row-divided';

if ( $auto_refresh ) {
    $main_classes[] = 'cart-auto-refresh';
}


$row_classes     = implode( ' ', $row_classes );
$main_classes    = implode( ' ', $main_classes );
$sidebar_classes = implode( ' ', $sidebar_classes );


do_action( 'woocommerce_before_cart' ); ?>
<div  class="cart-container <?php echo $row_classes; ?>">
<div class="left-inner" <?php echo $main_classes; ?>">


<?php wc_print_notices(); ?>

<form class="woocommerce-cart-form" action="<?php echo esc_url( wc_get_cart_url() ); ?>" method="post">


    <?php do_action( 'woocommerce_before_cart_table' ); ?>

    
    
            <?php do_action( 'woocommerce_before_cart_contents' ); ?>

            <?php
            foreach ( WC()->cart->get_cart() as $cart_item_key => $cart_item ) {
                $_product   = apply_filters( 'woocommerce_cart_item_product', $cart_item['data'], $cart_item, $cart_item_key );
                $product_id = apply_filters( 'woocommerce_cart_item_product_id', $cart_item['product_id'], $cart_item, $cart_item_key );

                if ( $_product && $_product->exists() && $cart_item['quantity'] > 0 && apply_filters( 'woocommerce_cart_item_visible', true, $cart_item, $cart_item_key ) ) {
                    $product_permalink = apply_filters( 'woocommerce_cart_item_permalink', $_product->is_visible() ? $_product->get_permalink( $cart_item ) : '', $cart_item, $cart_item_key );
                    ?>
                    <div class="product-wrapper base-tile <?php echo esc_attr( apply_filters( 'woocommerce_cart_item_class', 'cart_item', $cart_item, $cart_item_key ) ); ?>">

                      <div class="product-inner">

                        <div class="one product-thumbnail">
                        <?php
                        $thumbnail = apply_filters( 'woocommerce_cart_item_thumbnail', $_product->get_image(), $cart_item, $cart_item_key );

                        if ( ! $product_permalink ) {
                            echo $thumbnail; // PHPCS: XSS ok.
                        } else {
                            printf( '<a href="%s">%s</a>', esc_url( $product_permalink ), $thumbnail ); // PHPCS: XSS ok.
                        }
                        ?>
                        </div>
                        <div class="article_content">
                            <div class="article_details_group">
                                <div class="article_details">
                                    <div class="two product-name" data-title="<?php esc_attr_e( 'Product', 'woocommerce' ); ?>">
                                        <?php
                                            if ( ! $product_permalink ) {
                                                echo wp_kses_post( apply_filters( 'woocommerce_cart_item_name', $_product->get_name(), $cart_item, $cart_item_key ) . '&nbsp;' );
                                            } else {
                                                echo wp_kses_post( apply_filters( 'woocommerce_cart_item_name', sprintf( '<a href="%s">%s</a>', esc_url( $product_permalink ), $_product->get_name() ), $cart_item, $cart_item_key ) );
                                                    }

                                            do_action( 'woocommerce_after_cart_item_name', $cart_item, $cart_item_key );

                                            // Meta data.
                                            echo wc_get_formatted_cart_item_data( $cart_item ); // PHPCS: XSS ok.

                                            // Backorder notification.
                                            if ( $_product->backorders_require_notification() && $_product->is_on_backorder( $cart_item['quantity'] ) ) {
                                            echo wp_kses_post( apply_filters( 'woocommerce_cart_item_backorder_notification', '<p class="backorder_notification">' . esc_html__( 'Available on backorder', 'woocommerce' ) . '</p>', $product_id ) );
                                            }

                                            // Mobile price.
                                            ?>
                                        <div class="show-for-small mobile-product-price">
                                            <span class="mobile-product-price__qty"><?php echo $cart_item['quantity']; ?> x </span>
                                            <?php
                                            echo apply_filters( 'woocommerce_cart_item_price', WC()->cart->get_product_price( $_product ), $cart_item, $cart_item_key ); // PHPCS: XSS ok.
                                            ?>
                                        </div>
                                    </div>
                                    <div class="three product-price" data-title="<?php esc_attr_e( 'Price', 'woocommerce' ); ?>">
                                    <?php
                                        echo apply_filters( 'woocommerce_cart_item_price', WC()->cart->get_product_price( $_product ), $cart_item, $cart_item_key ); // PHPCS: XSS ok.
                                    ?>
                                    </div>
                                </div>
                        <div class="four roduct-quantity" data-title="<?php esc_attr_e( 'Quantity', 'woocommerce' ); ?>">
                        <?php
                        if ( $_product->is_sold_individually() ) {
                            $product_quantity = sprintf( '1 <input type="hidden" name="cart[%s][qty]" value="1" />', $cart_item_key );
                        } else {
                            $product_quantity = woocommerce_quantity_input(
                                array(
                                    'input_name'   => "cart[{$cart_item_key}][qty]",
                                    'input_value'  => $cart_item['quantity'],
                                    'max_value'    => $_product->get_max_purchase_quantity(),
                                    'min_value'    => '0',
                                    'product_name' => $_product->get_name(),
                                ),
                                $_product,
                                false
                            );
                        }

                        echo apply_filters( 'woocommerce_cart_item_quantity', $product_quantity, $cart_item_key, $cart_item ); // PHPCS: XSS ok.
                        ?>
                        </div>
                        </div>
                        <div class="article_content_bottom">
                        <div class="five product-remove">
                            <?php
                                echo apply_filters( // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
                                    'woocommerce_cart_item_remove_link',
                                    sprintf(
                                        '<a href="%s" class="remove" aria-label="%s" data-product_id="%s" data-product_sku="%s">&times;</a>',
                                        esc_url( wc_get_cart_remove_url( $cart_item_key ) ),
                                        esc_html__( 'Remove this item', 'woocommerce' ),
                                        esc_attr( $product_id ),
                                        esc_attr( $_product->get_sku() )
                                    ),
                                    $cart_item_key
                                );
                            ?>
                        </div>
                        
                        <div class="six product-subtotal" data-title="<?php esc_attr_e( 'Subtotal', 'woocommerce' ); ?>">
                            <?php
                                echo apply_filters( 'woocommerce_cart_item_subtotal', WC()->cart->get_product_subtotal( $_product, $cart_item['quantity'] ), $cart_item, $cart_item_key ); // PHPCS: XSS ok.
                            ?>
                        </div>
                        </div>
                        </div>
                    </div>
                    </div>
                    <?php
                }
            }
            ?>
            
            
            <?php do_action( 'woocommerce_cart_contents' ); ?>

        
                

                    <?php do_action( 'woocommerce_cart_actions' ); ?>

                    

                    <?php wp_nonce_field( 'woocommerce-cart', 'woocommerce-cart-nonce' ); ?>
                
            

            <?php do_action( 'woocommerce_after_cart_contents' ); ?>
    
    
    <?php do_action( 'woocommerce_after_cart_table' ); ?>

</form>

        <div id="payment-container" class="base-tile">
            <div class="left inner">
            <h3> Wir akzeptieren </h3>
            </div>
            <div  class="base-tile">
                <div class="payment-icons inline-block">
                    <div class="payment-icon">
    
                        
                    </div>
                </div>
            </div>
        </div>
</div>
</div>
<?php do_action( 'woocommerce_before_cart_collaterals' ); ?>

<div class=" cartsidebar base-tile">
<div class="sticky_cartsidebar">
    <?php flatsome_sticky_column_open( 'cart_sticky_sidebar' ); ?>

    <div class="cart-sidebar <?php echo $sidebar_classes; ?>">
        <?php
            /**
             * Cart collaterals hook.
             *
             * @hooked woocommerce_cross_sell_display
             * @hooked woocommerce_cart_totals - 10
             */
            do_action( 'woocommerce_cart_collaterals' );
        ?>
        <?php if ( wc_coupons_enabled() ) { ?>
        <form class="checkout_coupon mb-0" method="post">
            <div class="coupon">
                <h3 class="widget-title"><?php echo get_flatsome_icon( 'icon-tag' ); ?> <?php esc_html_e( 'Coupon', 'woocommerce' ); ?></h3><input type="text" name="coupon_code" class="input-text" id="coupon_code" value="" placeholder="<?php esc_attr_e( 'Coupon code', 'woocommerce' ); ?>" /> <input type="submit" class="is-form expand" name="apply_coupon" value="<?php esc_attr_e( 'Apply coupon', 'woocommerce' ); ?>" />
                <?php do_action( 'woocommerce_cart_coupon' ); ?>
            </div>
        </form>
        <?php } ?>
        <?php do_action( 'flatsome_cart_sidebar' ); ?>
    </div>

    <?php flatsome_sticky_column_close( 'cart_sticky_sidebar' ); ?>
</div>
</div>
</div>

<?php do_action( 'woocommerce_after_cart' ); ?>
</div>
</div>

还做了一个这样的自定义css：

  
 /*cart*/
 @media screen and (min-width: 1200px){
.cart-wrapper{
    max-width: 1176px;  
}
 }
 @media screen and (min-width: 960px){
    .cart-wrapper{
        padding:24px;
    }
 }
@media screen and (min-width: 600px){
    .cart-wrapper{
        padding: 18px;
        margin-top: 0;
    }
}
 .cart-wrapper {
    background-color: #f3f3f3;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-top: 18px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
@media screen and (min-width: 960px){
    .cart-inner{
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
    }
}
.cart-inner{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}
@media screen and (min-widht:960px){
    .base-tile {
        padding: 24px;
    }
}
@media screen and (min-widht:960px){
    .left_inner {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        max-width: 68%;
        padding-right: 24px;
    }
}
.left_inner{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: columns;
    flex-flow: columns;
    -ms-flex-direction: column;
    flex-direction: column;
}
 .base-tile {
     background-color:#FFFFFF;
     padding:18px;
     border-radius: 2px;
     -webkit-box-shadow:0 1px 2px 0 rgb(26 26 26 / 5%);
     box-shadow: -2 1px 2px 0 rgb(26 26 26 / 5%);
 }
@media screen and (min-width: 960px){
    .cart-container{
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        max-width: 68%;
        padding-right: 24px;
    }
}
.cart-container{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: columns;
    flex-flow: columns;
    -ms-flex-direction: column;
    flex-direction: column;
 }
.product-price {
        display:none;
}
@media screen and (min-width: 600px)
.product-wrapper {
    margin-bottom: 12px;
}
.product-wrapper {
    margin-bottom:10px;
}
.product-inner {
    box-sizing: inherit;
    display: -ms-grid;
    display: grid;
    grid-auto-flow: column;
    -ms-grid-columns: 86px 1fr;
    grid-template-columns: 86px 1fr;
    grid-gap: 15px;
    -webkit-font-smoothing: antialiased;
    -ms-grid-columns: 101px 1fr;
}
.one{
    width:86px;
}
@media screen and (min-width:600px){
    .article_content{
        display: -ms-grid;
        display: grid;
        grid-auto-flow: row;
        -ms-grid-rows: auto 1fr;
        -ms-grid-columns: 1fr;
    }
}
.article_content{
    position: relative;
    min-width: 0;
    -ms-grid-column: 2;
}
@media screen and (min-width:600px){
    .article_details_group{
        display: -ms-grid;
        display: grid;
        grid-auto-flow: column;
        grid-gap: 15px;
        -ms-grid-columns: 1fr auto;
        -ms-grid-row: 1;
    }
}
.article_details_group{
    overflow: hidden;
}
@media screen and (min-width:600px){
    .article_details{
        -ms-grid-column: 1;
        padding-right: 15px;
        margin-bottom: 0;
    }
}
.article_details{
    padding-right: 40px;
    min-width: 0;
    margin-bottom: 0.6em;
}
@media screen and (min-width:600px){
    .two{
        font-size: 14px;
        line-height: 18px;
        letter-spacing: 0.5px;
    }
}
@media screen and (min-width:0px){
    .two
        font-size: 14px;
        line-height: 18px;
        letter-spacing: 0.5px;
    }
}
.two {
    display: block;
    margin: 0;
    margin-bottom: 2px;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 0.5px;
}
@media screen and (min-width:600px){
    .four {
        text-align: right;
        -ms-grid-column: 2;
    }
}
@media screen and (min-width:600px){
    .article_content_bottom{
        display: -ms-grid;
        display: grid;
        grid-auto-flow: column;
        grid-template-areas: "a b";
        -ms-grid-row: 2;
        -ms-grid-columns: 1fr auto;
    }
}
.article_content_bottom{
    margin-bottom: -10px;
}
@media screen and (min-width:600px){
    .five {
        grid-area: a;
        -ms-flex-item-align: end;
        -ms-grid-row-align: end;
        align-self: end;
    }
}
@media screen and (min-width:600px){
    .six {
        grid-area: b;
        -ms-flex-item-align: end;
        -ms-grid-row-align: end;
        align-self: end;
        text-align: right;
        padding-bottom: 14px;
    }
}
#payment-container{
    margin-bottom: 0;
}
@media screen and (min-width:960px){
    .cartsidebar{
        width: 32%;
    }
}
.cartsidebar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: columns;
    flex-flow: columns;
    -ms-flex-direction: column;
    flex-direction: column;
}
.sticky_cartsidebar{
    position: sticky;
    top:0;
}
.checkout_coupon
    
.button-continue-shopping,
.continue-shopping{display:none;}

“cartsidebar”应显示在“cart-container”旁边的右侧。
我做错了什么？
为什么会显示在底部？
有人可以帮我解决这个问题并给我解释吗？

Answer 1

使用如下方式：

/*cart*/
 @media screen and (min-width: 1200px){
.cart-wrapper{
    max-width: 1176px; 
    min-width: 1100px; 

}
 }
 @media screen and (min-width: 960px){
    .cart-wrapper{
        padding-left:24px;
    }
 }
@media screen and (min-width: 600px){
    .cart-wrapper{
        padding: 2%;
        margin: 0;
    }
}