Question

我有一个基于wordpress的网站使用WooCommerce和一个名为Extra Product Options的插件。有了这个插件，除了有额外的选项，我在左下角有一个显示所选选项的浮动框。

是否可以通过CSS将浮动框从左下角移动到固定在产品图像下方？

当前位置完美地工作，除非屏幕较小的人正在使用它，因为浮动框覆盖了一些其他产品图像和在按钮处显示的信息。

如果这个过于复杂，还有其他推荐的解决方案吗？所有建议都很贴切！提前谢谢！

Answer 1

在css中找到.tm-floating-box并将位置从固定设置为相对

这就是你拥有的

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <solid android:color="#bdbdbd" />
            <size
                android:width="60dp"
                android:height="60dp" />
        </shape>
    </item>
    <item
        android:drawable="@drawable/ic_library_books_black_24dp"
        android:top="10dp"
        android:bottom="10dp"
        android:left="10dp"
        android:right="10dp"
        >
    </item>
</layer-list>

这是您要将其更改为

的内容

.tm-floating-box {
    width: auto;
    height: auto;
    padding: 1em;
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    left: 0;
    background: url("../images/p5.png") repeat scroll 0 0 transparent;
    z-index: 9999;
    max-height: 100%;
    overflow: hidden
}

它可能不会把它放在图像下面但它会阻止它流动并将它粘在左边。

CSS将浮动元素移动到另一个位置

1 个答案: