Question

我有一个商店小部件，它不是我从我的联盟网络获得的最吸引人的，但我想改变它的外观，使其看起来更清洁，更好。如果你访问jsfiddle并删除css，你可以看到原始的小部件。现在我刚刚使用chrome developer和css来改变小部件的外观。但我现在卡住了，因为我无法弄清楚如何在小部件中的不同项之间添加空间。我想每行4或5个项目，它们之间有一些空间。有点像这个网站（https://thestylescribe.com/shop/），但没有黑色边框和悬停信息。她使用与我相同的小部件，所以我知道可以以不同的方式设置它。任何人都可以帮助我让它看起来像这样。

jsfiddle - https://jsfiddle.net/rayfm9cp/

＆＃13;

.bo-garden {
    margin: 0 auto !important;
    width:100% !important;
    overflow: visible !important;
    min-width:700px !important;
}
.bo-box {
    background: none !important;
    border: none !important;
}
.bo-con:after, .bo-con:before {
    background: none !important;
}
img.bo-img{
    width: 200px !important;
    height: 300px !important;
}

＆＃13;

<div class="boutique-widget" data-widget-id="625672"><script type="text/javascript">!function(d,s,id){var e, p = /^http:/.test(d.location) ? 'http' : 'https';if(!d.getElementById(id)) {e = d.createElement(s);e.id = id;e.src = p + '://' + 'widgets.rewardstyle.com' + '/js/boutique.js';d.body.appendChild(e);}if(typeof window.__boutique === 'object') if(d.readyState === 'complete') {window.__boutique.init();}}(document, 'script', 'boutique-script');</script><div class="rs-adblock"><img src="//assets.rewardstyle.com/production/c108ac3fc3225bcc7f580567db42a46920d79336/images/search/350.gif" onerror="this.parentNode.innerHTML='Disable your ad blocking software to view this content.'" style="width: 15px; height: 15px;" /><noscript>JavaScript is currently disabled in this browser. Reactivate it to view this content.</noscript></div></div>

＆＃13;

Answer 1

这有点棘手，因为你必须在CSS中使用！important。我认为以下内容可以满足您的需求：

.bo-garden {
   min-height: 5055px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
}

.bo-con {
  margin: 0!important;
  position: relative!important;
  top: 0!important;
  left: 0!important;
  width: 30%;
}

样式化商店小部件看起来完全不同

1 个答案: