JSFiddle - React, Tailwind, and code Playground
HTML
<div class='multiColumn'>
<div>1단</div>
<div>2단</div>
<div class='pct'>3단</div>
<div>4단</div>
</div>
CSS
.multiColumn div { width:20%;height:200px;margin:0 2px;border:1px #ddd solid;float:left}
.multiColumn div.pct { border:1px #fdd solid}
JavaScript
$(function() {
contentLayAutoWidth();
});
$( window ).resize(function() {
contentLayAutoWidth();
});
/* 레이아웃의 다단 단수를 100%로 채움 */
function contentLayAutoWidth() {
$('.multiColumn > .pct').css("width", function(index) {
var siblingsWidthSum = 0;
var parentPadding = 1;
var siblingsMargin = 10;
var parentWidth = $(this).parent().innerWidth();
$(this).siblings().each(function() {
siblingsWidthSum = siblingsWidthSum + ($(this).outerWidth() + siblingsMargin);
});
return index = parentWidth - siblingsWidthSum - parentPadding;
});
}