Question

当屏幕足够宽时，我很简单想要#plusmin旁边带ID #knop的div。当屏幕变小时，＃knop必须得到Plusmin ......

我尝试了CSS中的各种显示选项但没有效果......

参见页面：https://www.tricotstoffen.nl/tricot-stoffen/dierenprint/stenzo-tricot-konijnen-zwart-wit-bio-katoen.html

<div class="product-add-form">
<form action="https://www.tricotstoffen.nl/checkout/cart/add/uenc/aHR0cHM6Ly93d3cudHJpY290c3RvZmZlbi5ubC90cmljb3Qtc3RvZmZlbi9kaWVyZW5wcmludC9zdGVuem8tdHJpY290LWtvbmlqbmVuLXp3YXJ0LXdpdC1iaW8ta2F0b2VuLmh0bWw,/product/324/" method="post"
      id="product_addtocart_form">
    <input type="hidden" name="product" value="324" />
    <input type="hidden" name="selected_configurable_option" value="" />
    <input type="hidden" name="related_product" id="related-products-field" value="" />
    <input name="form_key" type="hidden" value="xmAH6XJ8Kvrn2FTs" />                            <style type="text/css">
#box{
    width: 100%;
    min-height: 55px;
    display: inline-table;
}

#plusmin{
    width: 210px;
    height: 55px;
    float: left;
    padding-left: 3px;
    margin-bottom:10px;
}
#knop{
    height: 55px;
    width: 175px;
    float: left;
}

</style>
<div class="box-tocart" id="box">
<div class="fieldset">
            <div class="field qty" id="plusmin">
        <label class="label" for="qty"><span>Aantal</span></label>
<div class="control" data-bind="scope: 'qty_change'">

<button data-bind="click: decreaseQty">-</button>

<input  data-bind="value: qty()"
        type="number"
        name="qty"
        id="qty"
        maxlength="12"
        title="Aantal" class="input-text qty"
        data-validate="{&quot;required-number&quot;:true,&quot;validate-item-quantity&quot;:{&quot;minAllowed&quot;:0.5}}"
    />
<button data-bind="click: increaseQty">+</button>
</div>
<script type="text/x-magento-init">
{
    "*": {
        "Magento_Ui/js/core/app": {
            "components": {
                "qty_change": {
                    "component": "Jilco_plusminknoppen/js/view/product/view/qty_change",
                    "defaultQty": 0.5                    }
             }
        }
    }
}
</script>


    </div>
            <div class="actions" id="knop">
        <button type="submit"
                title="In Winkelwagen"
                class="action primary tocart"
                id="product-addtocart-button">
            <span>In winkelwagen</span>
        </button>
                </div>
</div>
</div>
<script type="text/x-magento-init">
{
    "#product_addtocart_form": {
        "Magento_Catalog/product/view/validation": {
            "radioCheckboxClosest": ".nested"
        }
    }
}
</script>

                </form>
</div>

Answer 1

您提供的示例页面上的

div#plusmin具有内联样式属性，该属性可能由某些magento javascript设置。您可以在浏览器开发控制台中看到它：

<div class="field qty" id="plusmin" style="width: 100%; display: block;">
   ...
</div>

这使您失败，因为内联样式属性规则优先于css样式规则。作为快速修复，您可以附加使用!important设置div宽度的css规则。这些规则不能被样式属性规则覆盖。

#plusmin{
    width: 210px !important;
    ...
}

Answer 2

看看here，当屏幕宽x像素时，您需要使用@media次查询来调整css。

例如：

@media screen and (max-width: 400px) {
    #knop {
        width: 100%;
    }

    #plusmin {
        width: 100%;
    }
}

Div不会得到回应

2 个答案: