如何更改 WordPress 子主题页面的布局？

Question

我是 WordPress 的新手。 我有 Woocommerce 网站。 产品页面是一个 Kaffa 子主题。 它有一个图像，在图像下它有按钮和输入的形式。

我想将此页面的布局更改为右侧的图像，左侧将是表单。

现在的代码如何：

<div class="row centeres">
  <div class="col-xl-9 col-lg-12 col-xs-12">
    image & form 
  </div>
</div>

期望的结果：

<div class="row">
  <div class="col-md-6"> image</div>
  <div class="col-md-6">form</div>
</div>

我怎么能做到这一点

Answer 1

您可以尝试添加一个浮点数：对； 到您的图像容器。 这最终将取决于您的主题是如何设置的：

.woocommerce div.product div.images.woocommerce-product-gallery {
float: right;

}

在 Kaffa 演示站点上，这是结果（再次假设这是您提到的相同主题）：

https://snipboard.io/TNSmVv.jpg

Answer 2

我使用 flexbox 解决了它

 row{ display: flex; width: 100%; flex-wrap:wrap; flex:0 0 100%;} div.col-md-6{ flex:1;}