更改 div 类元素 css 的对齐方式答案

【问题标题】：change alignment of div class element css更改 div 类元素 css 的对齐方式
【发布时间】：2020-12-21 19:11:20
【问题描述】：

我有一个产品页面，目前包含两部分：右侧的图像和左侧的一些摘要。但是，我对这种对齐方式不满意，并希望获取摘要部分并切换与图像的对齐方式，从而导致右侧的摘要部分和左侧的图像。我检查了检查工具，发现摘要部分有这个 div 类：summary.entry-summary，而图像部分有这个 div 类：div.woocommerce-product-gallery_image。任何想法如何做到这一点？

编辑：好的，我设法像这样对齐摘要部分：但是我仍然无法对齐图像。

.woocommerce #content div.product div.summary, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.summary {
    float: right
}
.woocommerce #content div.product div.summary, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.summary{
    width: 100%
}

编辑 2：好的，我现在设法将图像与不同的 div 类对齐，如下所示：

.woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images {
    float: left;
}

问题是摘要现在位于图像下方...

编辑 3：好的，我通过删除来解决所有问题

.woocommerce #content div.product div.summary, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.summary{
    width: 100%
}

谢谢大家！！

【问题讨论】：

我们可以看看你的代码吗？也许在工作的sn-p中？ minimal reproducible example
你的意思是什么代码？我目前没有添加任何内容。

标签： css alignment

【解决方案1】：

好的，我的最终代码是这样的：

.woocommerce #content div.product div.summary, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.summary {
    float: right
}
.woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images {
    float: left;
}
.woocommerce div.product div.images .woocommerce-product-gallery__trigger{
    display: none;
}

【讨论】：

【解决方案2】：

在 HTML 中使用浮点数或左、右和居中属性。

【讨论】：