Question

我正在使用WordPress和SiteOrigin（插件）及其北方主题来创建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
}

格式正确吗？当我调整大小时，一切似乎都正确对齐，但输入总是很好。：）

Answer 1

查看您的网站，持有衬衫静止图像的容器在屏幕大小768px处漂浮，容纳摘要的容器设置为“float：none”

要解决此问题，在屏幕宽度为768px时，保留衬衫图像的div不应浮动。您可以通过清除浮动来实现此目的。我希望这有帮助

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

OR

 @media (max-width: 768px) {
     .fpd-product-designer-wrapper {
        float: none; 
    }
  }

无法在WooCommerce产品页

1 个答案: