Question

我需要一些帮助来弄清楚如何在 3 个滑块图片之间制作相等的 10px 填充（空格）：？由于我能够定义图片样式之一 = 如果我将其设置为 padding-right: 10px;第三张图片幻灯片有一个空格，看起来像这样：

这是我的图像代码：

    <div class="w3-content w3-display-container max-view col-12">
    <?php
        $len = count($product_images);
        if($len > 2){
            for ($i = 0; $i < $len; $i++) {
                if($i % 3 == 0){
                    $j = 0;
                    if($i == 0)
                        echo '<div class="row slide w3-animate-opacity">';
                    else
                        echo '<div class="row slide w3-animate-opacity" style="display : none;">';
                }
                        echo '<div class="col-4" style="padding: 0px 10px 0px 0px !important;">';
                            echo '<img src="'.get_product_image_url($product_images[$len-1-$i], 'image_default').'" 
                            alt="'.get_product_title($product).'" width="100%" height="100%" 
                            onclick="showImageModal(this.src)"/>';
                        echo '</div>';
                    $j++;
                if($j == 3 || $i == $len - 1){
                    if ($j == 3)
                        echo '</div>';
                    else if ($i == $len - 1){
                        for($k = 0; $k < (3 - $j); $k++ ){
                            echo '<div class="col-4" style="padding: 0px 10px 0px 0px !important;">';
                                echo '<img src="'.get_product_image_url($product_images[$len-1-$k], 'image_default').'" 
                                alt="'.get_product_title($product).'" width="100%" height="100%" 
                                onclick="showImageModal(this.src)"/>';
                            echo '</div>';
                        }
                        echo '</div>';
                    }
                }
            }
            echo '<button class="w3-button w3-white w3-circle w3-display-left" onclick="plusDivs(-1)" id="prev"><b>&#10094;</b></button>'.
                    '<button class="w3-button w3-white w3-circle w3-display-right" onclick="plusDivs(1)" id="next"><b>&#10095;</b></button>';
        }
    ?>
    </div>

抱歉，我对此非常陌生......但非常感谢您的帮助！

Answer 1

如果我理解正确的话，您希望 imgs 1 和 2 之间有 10px 的间隙，而 imgs 2 和 3 之间有 10px 的间隙。但是在任一端都有一个小间隙，目前不相等。

您是否考虑过更换：

echo '<div class="col-4" style="padding: 0px 10px 0px 0px !important;">';

与：

echo '<div class="col-4" style="padding: 0px 5px 0px 5px !important;">';

也就是说，在每个图像的两侧具有相等的填充 - 相加以在它们之间提供 10px。它可以看起来更“平衡”。

在 3 张图片之间填充 10 像素

1 个答案: