css - 使 float :right image display on top of another div using responsive CSS

Question

我有这个 CSS 用于在线显示产品列表:

.product-box {
    width:100%;
    min-height:200px;
    padding:15px;
    margin-bottom:20px;
    border:1px solid #666666;
    display:inline-block;
}
.product-box-inner {
    display:inline;
    float:left;
    width:80%;
}
.product-box-image {
    display:inline;
    float:right;
    width:180px;
    height:180px;
    border:1px solid black;
}

和这个 HTML:

<div class="product-box">

    <div class="product-box-image">image</div>
    <div class="product-box-inner">
    <h4><?php echo $product["title"]; ?></h4><br>
    <p><?php echo nl2br(substr($product["description"],0,200)); ?></p><br>
    &pound;<?php echo $product["costprice"]; ?><form id="form1" name="form1" method="post" action="cart.php"><input type="hidden" name="pid" id="pid" value="<?php echo $product["sequence"]; ?>" /><input type="submit" name="button" id="button" value="Add to Shopping Cart" /></form>
    </div>

    </div>

当屏幕太小时，如何使 product-box-image div 显示在 product-box div 中心的文本之上(使用响应式 CSS)

Answer 1

你必须使用媒体查询

@media only screen and (max-width: 700px), only screen and (max-device-width: 700px) {
    .product-box-image {
         display:block !important;
         margin: 0 auto !important; 
           float:none !important;
    }
}

这将使图像不再向右浮动。告诉我它是否有效，或者设置一个 jsfiddle 以获得准确的答案。