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

Question

我是WordPress的新手。我有Wooccommerce网站。产品页面是一个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

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

.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;
}

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