Skip to content

Instantly share code, notes, and snippets.

@bobbysmith007

bobbysmith007/floor-all.html

Created May 12, 2020 19:21
Show Gist options
  • Save bobbysmith007/005d59355dd41c639b37a6d6cf499d96 to your computer and use it in GitHub Desktop.
Save bobbysmith007/005d59355dd41c639b37a6d6cf499d96 to your computer and use it in GitHub Desktop.
Download ZIP
Floor Tiling
Raw
floor-all.html
<!DOCTYPE html>
<html>
<head>
<style>
.world {padding:50px; position:relative;}
.floor{width:calc(200px * 3); height:calc(60px * 3); border:1px solid #EEF; position:relative; margin:0; padding:0; line-height:calc(6px * 3); overflow:visible; vertical-align:top;}
.floor-bg{width: calc((147px + 2px) * 3);
height: calc(60px * 3); border:1px solid black; position:absolute; margin:0; padding:0; overflow:visible;}
.row{ overflow:visible; display:block; height:calc(6px * 3); text-align:left; clear:both;}
.row > * {display:inline-block; text-align:left;}
.board {width:calc(72.0px *3); position:relative; height:calc(6px * 3); border:1px solid green; float:left; font-size:10px; top:0; left:0; }
.board.cut1-1 {width:calc(24px * 3); }
.board.cut1-2 {width:calc(48px * 3); }
.board.cut2-1 {width:calc(54px * 3); }
.board.cut2-2 {width: calc(18px * 3);}
.board.cut3-1 {width:calc(21px * 3); }
.board.cut3-2 {width: calc(51px * 3); }
.board.cut4-1 {width:calc(36px * 3); }
.board.cut4-2 {width: calc(36px * 3); }
.board.cut5-1 {width:calc(60px * 3); }
.board.cut5-2 {width: calc(12px * 3); }
.board.cut6-1 {width:calc(28px * 3); }
.board.cut6-2 {width: calc(44px * 3);
</style>
</head>
<body>
<h3>2 Row </h3>
<div class="world">
<div class="floor-bg"></div>
<div class="floor">
<div class="row">
<div class="board cut1-1 r1">1-1 - r1</div>
<div class="board r1"> r1</div>
<div class="board cut3-2 r2">3-2 r2</div>
</div>
<div class="row">
<div class="board cut2-1 r1">2-1 r2</div>
<div class="board">r2</div>
<div class="board cut1-2 r2">1-2 r2</div>
</div>
<br><br>
<div class="row">
<div class="board cut3-1 ">3-1 - 21" </div>
Waste: 27 + 21 = 48 / (147 * 2) = 16%
</div>
</div>
</div>
<h3>3 Row </h3>
<div class="world">
<div class="floor-bg"></div>
<div class="floor">
<div class="row">
<div class="board cut1-1 r1">1-1 - r1</div>
<div class="board r1"> r1</div>
<div class="board cut3-2 r2">3-2 r2</div>
</div>
<div class="row">
<div class="board cut2-1 r1">2-1 r2</div>
<div class="board">r2</div>
<div class="board cut4-2 r2">4-2 r2</div>
</div>
<div class="row">
<div class="board cut4-1 r1">4-1 - r1</div>
<div class="board r1"> r3</div>
<div class="board cut1-2">1-2 r1</div>
</div>
<br><br>
<div class="row">
<div class="board cut3-1 r1">3-1 - r1 - 21""</div>
<div class="board cut2-2">2-2 r1 - 18"</div>
Waste: 0+15+9+21+18 = 63 / (147 * 3) = .14%
</div>
</div>
</div>
<h3>4 Row </h3>
<div class="world">
<div class="floor-bg"></div>
<div class="floor">
<div class="row">
<div class="board cut1-1 r1">1-1 - r1</div>
<div class="board r1"> r1</div>
<div class="board cut3-2 r2">3-2 r2</div>
</div>
<div class="row">
<div class="board cut2-1 r1">2-1 r2</div>
<div class="board">r2</div>
<div class="board cut4-2 r2">4-2 r2</div>
</div>
<div class="row">
<div class="board cut4-1 r1">4-1 - r1</div>
<div class="board r1"> r3</div>
<div class="board cut1-2">1-2 r1</div>
</div>
<div class="row">
<div class="board cut5-1 r1">5-1 - r1</div>
<div class="board r1"> r3</div>
<div class="board cut2-2">2-2 r1</div>
</div>
<br><br>
<div class="row">
<div class="board cut3-1 r1">3-1 - 21""</div>
<div class="board cut5-2">5-2 - 12"</div>
Waste: 0 + 15 + 9 + 3 + 21 + 12 = 60 / (147 * 4) = .10%
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment