造型商店小部件看起来完全不同

我有一个商店小部件不是我从我的联属网络中获得最吸引人的，但我想改变它的外观，使其看起来更干净和更好。如果您访问jsfiddle并删除css，您可以看到原始小部件。现在我刚刚使用Chrome开发人员和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>

来源

2017-08-02 user6738171

'.bo-con'元素都是绝对定位的。您必须重写该文件以将其重新放回文档的正常流程或更改其特定位置。 –

'.bo-img宽度：200px！important; 身高：300px！重要; }会导致在使用固定点时覆盖原始图像宽高比。你最好用'.bo-img {max_width：200px; max-height：300px }'这将允许CSS正确缩放图像 –

但我希望所有的图像都是这个尺寸（200x300）。 – user6738171

这是一个有点棘手，因为你将不得不使用你的CSS重要。我想以下给你你需要的东西：

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

来源

2017-08-02 13:48:21 Gerard

感谢您的帮助，它看起来好多了。你会知道如何中心小部件？到目前为止，它在页面上稍微偏离中心。也有可能像我提到的博客添加一个更多的按钮按钮？（https://thestylescribe.com/shop/） - 这就是你的编辑到目前为止的代码的样子 - https://jsfiddle.net/06m0xzd7/ – user6738171

造型商店小部件看起来完全不同

回答

相关问题