JSFiddle - React, Tailwind, and code Playground
HTML
<div class="pre-wrapper">
<div class="opera-fix">
<div class="wrapper">
<ul class="itemList">
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>
</div>
</div>
</div>
CSS
.pre-wrapper {
margin: 10px;
width: 1%;
}
.opera-fix {
width: 40%;
}
.wrapper {
border: 1px solid black;
overflow: hidden;
width: 15000%;
}
.itemList {
height: 90px;
list-style: none;
margin: 0;
padding: 0;
width: 10000%; /* просто чтобы всё было в одну строку */
}
.item {
background: green; /* картинок не будет, будет цвет блоков */
/display: inline;
float: left;
height: 80px;
margin: 5px;
padding: 0;
width: 140px;
}
JavaScript
if ( $.browser.mozilla || ($.browser.msie && $.browser.version >= 8) ) {
resizeFix();
$(window).resize(resizeFix);
}
function resizeFix() {
var w, h = $('.wrapper'), i = $('.item').outerWidth() + parseInt($('.item').css('marginLeft')) * 2;
h.width('');
w = Math.floor(h.width() / i) * i;
h.width(w + 'px');
}