垂直 Woocommerce 画廊的 CSS答案

【问题标题】：CSS for Vertical Woocommerce Gallery垂直 Woocommerce 画廊的 CSS
【发布时间】：2022-01-01 06:33:06
【问题描述】：

在我的web page 上，我将默认的 woocommerce 画廊更改为垂直视图。我使用两列 70% 的画廊，30% 的文本。我尝试了以下 CSS 代码，但我仍然需要将缩略图放大一点并将主照片向右移动，如我在 attached photo 中所示你能用更多的代码指导我吗？谢谢！

.woocommerce-product-gallery {
    display: flex;}
.woocommerce-product-gallery .flex-control-thumbs {
    order: -10;}
.woocommerce div.product div.images .flex-control-thumbs li {
    width: 100%;
    padding-top: 0;
    padding-bottom: 5px;}
.woocommerce div.product .product_meta {
    border-top: 0px solid #ebebeb;
    padding-top: 1em;
    font-size: .9em;
    margin: 0 0 .8em;}
.woocommerce div.product div.images img {
    display: block;
    width: 80%;
    height: auto;
    box-shadow: none;}

【问题讨论】：

标签： css wordpress woocommerce elementor

【解决方案1】：

我会试试这个：

ol.flex-control-nav.flex-control-thumbs { width: 100%; }

img.wp-post-image { margin-left: 50px; }

【讨论】：

谢谢，但它看起来不对，主照片中有很多空白空间。也许我应该清除我的代码并接受完整的建议。这是一个清晰的 [terre-et-metal.fr/product/479/banc-ecole] 应该是什么样子的示例

【解决方案2】：

根据您的安装情况可能会略有不同，但这对我有用：

    .single-product div.product .woocommerce-product-gallery .flex- 
    viewport {
    width: 75%;
    float: right;
    }

    /* Make Gallery 25% width and place it beside the image */

    .single-product div.product .woocommerce-product-gallery .flex- 
    control-thumbs {
    width: 25%;
    float: right;
    }

    /* Style each Thumbnail with width and margins */

    .single-product div.product .woocommerce-product-gallery .flex- 
    control-thumbs li img {
    width: 90%;
    float: none;
    margin: -10px 0 0 10%;
    }

【讨论】：