在我的網頁上，我將默認的 woocommerce 畫廊更改為垂直視圖。我使用兩列 70% 的畫廊，30% 的文本。我嘗試了以下 CSS 代碼，但我仍然需要將縮略圖放大一點，并將主照片向右移動，如附件照片中所示， 您能用更多代碼指導我嗎？謝謝！
.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;}uj5u.com熱心網友回復：
我會試試這個：
ol.flex-control-nav.flex-control-thumbs { width: 100%; }
img.wp-post-image { margin-left: 50px; }
uj5u.com熱心網友回復：
根據您的安裝，它可能略有不同，但這對我有用：
.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%;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/364397.html
標籤：css WordPress的 求购 元素