CSS宽度和宽度图像的高度问题

Question

我正在使用编码来存储商店图片＆amp;通过Widget在Wordpress中链接。

一切都已完成，但我不知道为什么图像框的宽度会很高。

截图 -

我想制作如下截图

以下是我在wordpress小部件中直接使用的内容： -

In [75]: df.index.get_level_values('Id').str.len().max()
Out[75]: 8

.go-home-stores {
  margin: 0 -4px
}
.coupon-store,
.go-home-stores a {
  display: block;
  border: 1px solid #dde1e4;
  margin-bottom: 8px;
  background-color: #fff;
  overflow: hidden;
  text-align: center
}
.go-home-stores a img {
  max-width: 100%;
  max-height: 100%
}
.go-home-stores a {
  line-height: 40px;
  height: 44px
}
.go-home-stores .gocol-4 {
  padding: 0 4px
}
.coupon-store {
  line-height: 30px;
  height: 36px
}
.coupons-list {
  padding: 1px 0;
  position: relative;
  overflow: hidden
}
.coupons-list h2 {
  margin-bottom: 8px;
  font-size: 16px
}
.coupons-list .coupon {
  opacity: 1;
  transform: scale(1);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  -moz-transform: scale(1);
  margin-top: 0 !important;
  background-color: #fff;
  border: 1px solid #e5e5e5;
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, .1), 0 3px 12px rgba(0, 0, 0, .04);
  padding: 10px 8px;
  position: relative;
  overflow: hidden;
  font-size: 15px;
  transition: .35s;
  -webkit-transition: .35s;
  -moz-transition: .35s;
  -o-transition: .35s
}
.coupons-list .coupon .coupon-box>div:last-child,
.coupons-list .coupon .coupon-click,
.coupons-list .coupon .gocol-6 {
  padding-right: 0
}
.coupons-list .coupon.swiped-left {
  border-right-width: 12px
}
.coupons-list .coupon.swiped-right {
  border-left-width: 12px
}
.coupons-list

Answer 1

可能通过添加媒体查询。 JSFiddle

<强> HTML：

<div class="go-home-stores"> 

<div class="gocol-4"> <a href="#" title="Mobikwik Coupons"> <img src="http://cdn.lmitassets.com/gograbon/images/merchant/mobikwik-1432618126498.jpeg" alt="Mobikwik Coupons"> </a> </div> 

<div class="gocol-4"> <a href="#" title="Myles Car Coupons"> <img src="http://cdn.lmitassets.com/gograbon/images/merchant/mylescar.jpeg" alt="Myles Car Coupons"> </a> </div> 

<div class="gocol-4"> <a href="#" title="Shopclues Coupons"> <img src="http://cdn.lmitassets.com/gograbon/images/merchant/shopclues-1457362077302.jpeg" alt="Shopclues Coupons"> </a> </div> 

<div class="gocol-4"> <a href="#" title="Jabong Coupons"> <img src="http://cdn.lmitassets.com/gograbon/images/merchant/jabong-1432618184670.jpeg" alt="Jabong Coupons"> </a> </div> 

<div class="gocol-4"> <a href="#" title="UBER Coupons"> <img src="http://cdn.lmitassets.com/gograbon/images/merchant/uber-1454587308013.jpeg" alt="UBER Coupons"> </a> </div> 

<div class="gocol-4"> <a href="#" title="Thrill Poker Coupons"> <img src="http://cdn.lmitassets.com/gograbon/images/merchant/thrillpoker.jpeg" alt="Thrill Poker Coupons"> </a> </div> <div class="row-view-more"> 

<div class="gocol-4"> <a href="#" title="Freecharge Coupons"> <img src="http://cdn.lmitassets.com/gograbon/images/merchant/freecharge-1458282310679.jpeg" alt="Freecharge Coupons"> </a> </div> 

<div class="gocol-4"> <a href="#" title="Amazon Coupons"> <img src="http://cdn.lmitassets.com/gograbon/images/merchant/amazonindia-1437129803590.jpeg" alt="Amazon Coupons"> </a> </div> 

<div class="gocol-4"> <a href="#" title="Paytm Coupons"> <img src="http://cdn.lmitassets.com/gograbon/images/merchant/paytm-1449060385177.jpeg" alt="Paytm Coupons"> </a> </div> 

<div class="gocol-4"> <a href="#" title="Dominos Coupons"> <img src="http://cdn.lmitassets.com/gograbon/images/merchant/dominos.jpeg" alt="Dominos Coupons"> </a> </div> 

<div class="gocol-4"> <a href="#" title="Swiggy Coupons"> <img src="http://cdn.lmitassets.com/gograbon/images/merchant/swiggy-1441182433677.jpeg" alt="Swiggy Coupons"> </a> </div> 

<div class="gocol-4"> <a href="#" title="Flipkart Coupons"> <img src="http://cdn.lmitassets.com/gograbon/images/merchant/flipkart-1432804551875.jpeg" alt="Flipkart Coupons"> </a> </div>

OLD CSS：

    .go-home-stores{margin:0 -4px}.coupon-store,.go-home-stores a{display:block;border:1px solid #dde1e4;margin-bottom:8px;background-  color:#fff;overflow:hidden;text-align:center}.go-home-stores a img{max-width:100%;max-height:100%}.go-home-stores a{line-height:40px;height:44px}.go-home-stores .gocol-4{padding:0 4px}.coupon-store{line-height:30px;height:36px}.coupons-list{padding:1px 0;position:relative;overflow:hidden}.coupons-list h2{margin-bottom:8px;font-size:16px}.coupons-list .coupon{opacity:1;transform:scale(1);-webkit-transform:scale(1);-ms-transform:scale(1);-moz-transform:scale(1);margin-top:0 !important;background-color:#fff;border:1px solid #e5e5e5;box-shadow:0 2px 4px -1px rgba(0,0,0,.1),0 3px 12px rgba(0,0,0,.04);padding:10px 8px;position:relative;overflow:hidden;font-size:15px;transition:.35s;-webkit-transition:.35s;-moz-transition:.35s;-o-transition:.35s}.coupons-list .coupon .coupon-box>div:last-child,.coupons-list .coupon .coupon-click,.coupons-list .coupon .gocol-6{padding-right:0}.coupons-list .coupon.swiped-left{border-right-width:12px}.coupons-list .coupon.swiped-right{border-left-width:12px}.coupons-list

新CSS：

.go-home-stores .gocol-4 {
    padding: 0 4px;
    display: inline-block;
    float: left;
}

  @media screen and (max-width:767px) {
    .gocol-4 {
    width:25%;
    float:left;
  }
}