0

オンラインで製品のリストを表示するためのこの 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 の中央のテキストの上に div を表示するにはどうすればよいですか (レスポンシブ CSS を使用)product-box

4

2 に答える 2

0

どうぞ:

http://liveweave.com/2RvC4R

@media all and (max-width: 600px) {
  .product-box-image {
     display: block;
     margin: 0 auto;
     float: none;
  }
}
于 2013-11-06T13:30:11.273 に答える
0

メディアクエリを利用する必要があります

@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をセットアップしてください。

于 2013-11-06T13:04:35.557 に答える