css - 使用响应式 CSS 使浮动：右图像显示在另一个 div 之上

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-imagediv 显示在 div 中心的文本之上（使用响应式 CSS）product-box

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 以获得准确的答案。

Answer 2

你去：

http://liveweave.com/2RvC4R

@media all and (max-width: 600px) {
  .product-box-image {
     display: block;
     margin: 0 auto;
     float: none;
  }
}