JSFiddle - React, Tailwind, and code Playground

by jslowack

HTML

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<div id="container">

</div>

CSS

#container {
  height:300px;
  width:500px;
  margin:0 auto;
  background:#ccc;
}
#container .item{
  float:left;
}
#container .item:nth-child(1){
  background:red;
}
#square .item:nth-child(2){
  background:blue;
}
#container .row:nth-child(2) .item:nth-child(1){
  background:yellow;
}
#container .row:nth-child(2) .item:nth-child(2){
  background:green;
}

JavaScript

// GEGEVEN (heel belangrijk):
// - container met fixed breedte en hoogte (in css/javascript)
// - object lijst met percentages

var $square = $("#container");
var sqWidth = $square.width();
var sqArea = sqWidth * $square.height();
var percentages = [0.2,0.4,0.2,0.2];


// sorteer van laag naar hoog, zodat in 1 zelfde row ongeveer gelijkaardige percentages zitten => op deze manier wordt de breedte redelijk gelijk verdeeld onder elkaar
percentages = percentages.sort();

// 1. neem altijd twee percentages uit de lijst
for(var i = 0; i < percentages.length; i = i+2){
	var p1 = percentages[i];
  var p2 = percentages[i+1];
  
  // 2. bereken de totale oppervlakte van de row
	var totalPercentage = p1 + p2;
  var availableArea = sqArea*totalPercentage;
  
  // 3. bereken de hoogte adv de breedte van de container en de beschikbare oppervlakte van de row
  var height = availableArea/sqWidth;
  
  // 4. bereken de breedte aan de hand van de hoogte van de row en de beschikbare oppervlakte per percentage
  var w1 = (p1*sqArea)/height;
  var w2 = (p2*sqArea)/height;
  
  // 5. nu weten we de hoogte (height) en de breedtes (w1 & w2) => genereer de html voor 1 row
  var rowHtml = "";
  rowHtml += generateBlock(w1, height, "percentage:"+p1);
  rowHtml += generateBlock(w2, height, "percentage:"+p2);
  console.log(rowHtml);
  $("#container").append('<div class="row">'+rowHtml+'</div>');
}

function generateBlock(width, height, innerHtml){
	return '<div class="item" style="height:'+height+'px;width:'+width+'px;">'+innerHtml+'</div>';
}