我有一个商店小部件,它不是我从联属网络获得的最有吸引力的小部件,但我想更改它的外观,使其看起来更干净、更好。如果您访问 jsfiddle 并删除 css,您可以看到原始的小部件。现在我刚刚使用 chrome Developer 和 css 来更改小部件的外观。但我现在陷入困境,因为我不知道如何在小部件中的不同元素之间添加空间。我想要每行 4 或 5 个元素,并且它们之间有一些空间。有点像这个网站( 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>
最佳答案
这有点棘手,因为您必须在 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%;
}
关于javascript - 设置商店小部件的样式,使其看起来完全不同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45462279/