umerata
8/11/2017 - 10:39 AM
Width Playgrounds | label-html
Width Playgrounds
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Testing Page</title>
<!-- Normalize.css -->
<link rel="stylesheet" href="https://necolas.github.io/normalize.css/6.0.0/normalize.css">
<!--
// Optional Bootstrap
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> -
-->
<!-- Your Css -->
<style>
html{
padding:50px;
}
body{
/*padding:50px;*/
font-family: sans-serif;
}
h2{
width:100%;
float:left;
clear:both;
}
.equal-boxes-container{
width:100%;
background-color:pink;
float:left;
clear:both;
}
.box-outer{
display:table;
table-layout: fixed;
border:1px solid black;
float:left;
box-sizing:border-box;
height:100px;
background-color:red;
padding:30px;
height:100%;
}
.box-contents{
display:table-cell;
vertical-align: middle;
background-color:blue;
color:#fff;
}
.box-2{
width:calc(100% / 2);
}
.box-3{
width:calc(100% / 3);
}
.box-4{
width:calc(100% / 4);
}
.box-5{
width:calc(100% / 5);
}
.seperated-boxes{
width:100%;
float:left;
clear:both;
}
.cont-width-3{
width: calc(100% + 20px);
margin-left:-10px;
background-color:transparent;
}
.seperated-boxes .sw-3{
float:left;
width: calc(100% / 3 - 20px);
margin:10px;
height:30px;
background-color:pink;
}
.cont-width-2{
width: calc(100% + 20px);
margin-left:-10px;
background-color:transparent;
}
.seperated-boxes .sw-2{
float:left;
width: calc(100% / 2 - 20px);
margin:10px;
height:30px;
background-color:pink;
}
.cont-width-3{
width: calc(100% + 20px);
margin-left:-10px;
background-color:transparent;
}
.seperated-boxes .sw-3{
float:left;
width: calc(100% / 3 - 20px);
margin:10px;
height:30px;
background-color:pink;
}
.cont-width-4{
width: calc(100% + 20px);
margin-left:-10px;
background-color:transparent;
}
.seperated-boxes .sw-4{
float:left;
width: calc(100% / 4 - 20px);
margin:10px;
height:30px;
background-color:pink;
}
.cont-width-5{
width: calc(100% + 20px);
margin-left:-10px;
background-color:transparent;
}
.seperated-boxes .sw-5{
float:left;
width: calc(100% / 5 - 20px);
margin:10px;
height:30px;
background-color:pink;
}
/* Auto width and gutters seperated boxes*/
.sw-auto-boxes{
float:left;
clear:both;
}
.sw-n{
background-color:pink;
float:left;
}
</style>
</head>
<body>
<h1>Equally Divided Blocks by Width</h1>
<h2>Fixed widths</h2>
<div class='equal-boxes-container'>
<div class='box-2 box-outer'>
<div class="box-contents">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, repudiandae.
</div>
</div>
<div class='box-2 box-outer'>
<div class="box-contents">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, illo?
</div>
</div>
</div>
<div class='equal-boxes-container'>
<div class='box-3 box-outer'>
<div class="box-contents">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, mollitia.
</div>
</div>
<div class='box-3 box-outer'>
<div class="box-contents">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, quos.
</div>
</div>
<div class='box-3 box-outer'>
<div class="box-contents">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, aliquid.
</div>
</div>
</div>
<div class='equal-boxes-container'>
<div class='box-4 box-outer'>
<div class="box-contents">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, quos.
</div>
</div>
<div class='box-4 box-outer'>
<div class="box-contents">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, tempora?
</div>
</div>
<div class='box-4 box-outer'>
<div class="box-contents">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, temporibus.
</div>
</div>
<div class='box-4 box-outer'>
<div class="box-contents">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, ratione.
</div>
</div>
</div>
<div class='equal-boxes-container'>
<div class='box-5 box-outer'>
<div class="box-contents">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, soluta.
</div>
</div>
<div class='box-5 box-outer'>
<div class="box-contents">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum, fuga!
</div>
</div>
<div class='box-5 box-outer'>
<div class="box-contents">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat, amet.
</div>
</div>
<div class='box-5 box-outer'>
<div class="box-contents">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente, nobis?
</div>
</div>
<div class='box-5 box-outer'>
<div class="box-contents">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus, magnam.
</div>
</div>
</div>
<h2>Dynamic widths (using jquery)</h2>
<div class='equal-boxes-container auto-width'>
<div class='box-n box-outer'>
<div class="box-contents">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus, magnam.
</div>
</div>
<div class='box-n box-outer'>
<div class="box-contents">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus, magnam.
</div>
</div>
<div class='box-n box-outer'>
<div class="box-contents">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus, magnam.
</div>
</div>
<div class='box-n box-outer'>
<div class="box-contents">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus, magnam.
</div>
</div>
<div class='box-n box-outer'>
<div class="box-contents">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus, magnam.
</div>
</div>
</div>
<h2>Seperated fixed width boxes</h2>
<div class="seperated-boxes cont-width-2">
<div class="sw-2">data</div>
<div class="sw-2">data</div>
</div>
<div class="seperated-boxes cont-width-3">
<div class="sw-3">data</div>
<div class="sw-3">data</div>
<div class="sw-3">data</div>
</div>
<div class="seperated-boxes cont-width-4">
<div class="sw-4">data</div>
<div class="sw-4">data</div>
<div class="sw-4">data</div>
<div class="sw-4">data</div>
</div>
<div class="seperated-boxes cont-width-5">
<div class="sw-5">data</div>
<div class="sw-5">data</div>
<div class="sw-5">data</div>
<div class="sw-5">data</div>
<div class="sw-5">data</div>
</div>
<h2>Seperated auto width boxes with (using jquery)</h2>
<div class="sw-auto-boxes" data-gutters='10'>
<div class="sw-n">data</div>
<div class="sw-n">data</div>
<div class="sw-n">data</div>
<div class="sw-n">data</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<!--
// Optional Bootstrap
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
-->
<script>
$(document).ready(function(){
console.log('test running');
$('.sw-auto-boxes').each(function(){
var margin = parseInt($(this).attr('data-gutters'));
var boxes = $(this).find('.sw-n');
$(boxes).each(function(){
$(this).css({
'width':'calc(100% / '+boxes.length+' - '+ (margin*2) + 'px )',
'margin':'0 '+margin+'px'
});
})
$(this).css({
'width':'calc(100% + '+ (margin*2) + 'px )',
'margin-left': '-'+margin+'px'
});
})
// Give width automatically depending on number of boxes
$('.auto-width').each(function(){
var boxes = $(this).find('.box-n');
$(boxes).each(function(){
$(this).css('width','calc(100% / '+boxes.length+')');
})
});
// Matching Heights of elements
var matchHeights = [
{
selector:'.box-4',
maxHeight:0,
},
{
selector:'.box-5',
maxHeight:0,
},
{
selector:'.box-3',
maxHeight:0,
}];
$(matchHeights).each(function(index,item){
$(item.selector).each(function(){
if ($(this).height() > item.maxHeight) { item.maxHeight = $(this).height(); }
});
$(item.selector).height(item.maxHeight);
})
})
</script>
</body>
</html>