0

我正在使用 WordPress 和 SiteOrigin（插件），它是 North 主题来创建一个 T 恤印刷网站，并且在产品页面中对齐产品的几个部分时遇到了特殊问题。

这是特定页面的链接：

http://7dollarprintedtshirts.com/product/custom-t-shirts-for-kids-and-adults/

基本上，我希望设计师在左边，右边是产品信息，底部是产品细节。

我已经使用以下代码修改了 CSS，因此页面是全宽的：

body.responsive .container {
    width: 100%;
    max-width: 1500px;
}

内容似乎使用以下代码正确对齐：

.woocommerce.single #content div.product div.entry-summary {
    margin-top: 0;
    width: 54%;
    float: left;
    padding-left: 50px;
}

但是当我调整窗口大小以便查看所有内容是否正确对齐时，它没有。:(

在某一时刻，右侧的产品信息移动到了我想要的设计师下方，但现在它离设计师的底部边缘太近了，但是当我将屏幕调整得更小时，产品信息似乎挤到了设计师部分的权利。

请看附件截图：

http://7dollarprintedtshirts.com/wp-content/uploads/2017/04/now-text-is-squeezed.png

我尝试修改 CSS，但似乎并没有按照我想要的方式结束。

页面的每个部分我该怎么做

• 设计师 • 产品信息 • 产品详情

间隔和对齐是否正确，无论窗口大小，所有内容都将间隔和对齐，以便看起来正确分割？

任何帮助将不胜感激！

请注意，自定义 CSS 代码已被删除，因此我可以从头开始。:)

更新：

好的，我输入了以下 CSS 代码：

@media (max-width: 768px) {
         .fpd-product-designer-wrapper:after {
            content: '';
            display: table;
            clear: left;    
        }
      }

.fpd-product-designer-wrapper {
    margin-bottom: 50px;
}

.woocommerce div.product .summary {
    width: 38% !important;
}

.woocommerce div.product .summary {
    float: right;
    clear: right;
    width: 48%;
}

@media (max-width: 945px) {
         .woocommerce div.product .summary {
            float: left;
            clear: left;    
        }
      }

@media (max-width: 768px) {
         .woocommerce div.product .summary {
            float: left;
            clear: left;    
        }
      }

它似乎根据屏幕的宽度将我想要的部分分开，但是当我的产品摘要低于 944px 时，当我相信我将它设置到左侧时，它会浮动到右侧。我该如何纠正这个问题，因为我上面输入的内容不起作用。

再次更新！

我输入了以下 CSS 代码，使设计师在顶部，产品摘要在中间，产品详细信息在底部：

.fpd-product-designer-wrapper {
    margin-bottom: 50px;
}

body.responsive.woocommerce.single #content div.product div.entry-summary {
        width: 100% !important
}

这格式正确吗？当我调整它的大小时，一切似乎都正确对齐，但有输入总是很好。:)

4

1 回答 1

0

查看您的站点，包含衬衫静止图像的容器在屏幕尺寸 768px 处向左浮动，并且包含摘要的容器设置为“float: none”

为了解决这个问题，在屏幕宽度为 768 像素的情况下，保存衬衫图像的 div 不应浮动。您可以通过清除浮动来实现此目的。我希望这有帮助

@media (max-width: 768px) {
         .fpd-product-designer-wrapper:after {
            content: '';
            display: table;
            clear: left;    
        }
      }

或者

 @media (max-width: 768px) {
     .fpd-product-designer-wrapper {
        float: none; 
    }
  }
于 2017-04-21T18:03:37.983 回答