设计商店小部件以使其看起来完全不同

Question

我有一个商店小部件，它不是我从联属网络获得的最吸引人的，但我想更改它的外观以使其看起来更干净、更好看。如果您访问 jsfiddle 并删除 css，您可以看到原始小部件。现在我一直在使用 chrome 开发人员和 css 来更改小部件的外观。但是我现在卡住了，因为我不知道如何在小部件的不同项目之间添加 space 。我想要每行 4 或 5 个项目，它们之间有一些 space。有点像这个网站 (https://thestylescribe.com/shop/)，但没有黑色边框和悬停信息。她使用与我相同的小部件，所以我知道可以采用不同的样式。谁能帮我把它弄成这样。

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

.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;
}

<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>

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%;
}

设计商店小部件以使其看起来完全不同

Styling a shop widget to look completely different

javascript

css

widget

styling