How to manage four boxes, three boxes, two boxes in each row?
its very simple if you want to manage these boxes in a row so follow the way:
<!DOCTYPE html>
<html>
<head>
<title>Boxes in columns</title>
<style type="text/css">
body {margin:0; padding: 0px; font-family: 'Roboto', sans-serif;}
.wrapper{width: 100%; max-width: 1200px; margin: 0 auto;}
section{margin-bottom: 15px;}
section:after{display: block; clear: both; content: "";}
.text-center{text-align: center;}
.box {float: left; background-color: #eaeaea; padding: 15px; box-sizing: border-box; margin-right: 1%;}
h3,p{margin-top: 0px; line-height: 18px;}
.boxes-4 .box{ width:24.22%; min-height: 100px; }
.boxes-4 .box:nth-child(4){margin-right: 0px;}
.boxes-3 .box{ width: 32.63%;min-height: 100px; }
.boxes-3 .box:nth-child(3){margin-right: 0px;}
.boxes-2 .box{ width: 49.5%;min-height: 100px; }
.boxes-2 .box:nth-child(2){margin-right: 0px;}
</style>
</head>
<body>
<div class="wrapper">
<h2>Four Boxes in Each Row</h2>
<!-- Four boxes html Start -->
<section class="boxes-4">
<div class="box">
<h3>Box 1 in column #1</h3>
<p>Description here</p>
</div>
<!-- One boxe html ended -->
<div class="box">
<h3>Box 2 in column #2</h3>
<p>Description here</p>
</div>
<!-- Two boxe html ended -->
<div class="box">
<h3>Box 3 in column #3</h3>
<p>Description here</p>
</div>
<!-- Three boxe html ended -->
<div class="box">
<h3>Box 4 in column #4</h3>
<p>Description here</p>
</div>
<!-- One boxe html ended -->
</section>
<!-- Four boxes html ended -->
<h2>Three Boxes in Respective Row</h2>
<!-- Three boxes html Start -->
<section class="boxes-3 text-center">
<div class="box">
<h3>Box 1 in column #1</h3>
<p>Description here</p>
</div>
<!-- One boxe html ended -->
<div class="box">
<h3>Box 2 in column #2</h3>
<p>Description here</p>
</div>
<!-- Two boxe html ended -->
<div class="box">
<h3>Box 3 in column #3</h3>
<p>Description here</p>
</div>
</section>
<!-- Three boxes html ended -->
<h2>Two Boxes in Single Row</h2>
<!-- Two boxes html Start -->
<section class="boxes-2 text-center">
<div class="box">
<h3>Box 1 in column #1</h3>
<p>Description here</p>
</div>
<!-- One boxe html ended -->
<div class="box">
<h3>Box 2 in column #2</h3>
<p>Description here</p>
</div>
<!-- Two boxe html ended -->
</section>
<!-- Two boxes html ended -->
</div>
<!-- .wrapper html ended -->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Boxes in columns</title>
<style type="text/css">
body {margin:0; padding: 0px; font-family: 'Roboto', sans-serif;}
.wrapper{width: 100%; max-width: 1200px; margin: 0 auto;}
section{margin-bottom: 15px;}
section:after{display: block; clear: both; content: "";}
.text-center{text-align: center;}
.box {float: left; background-color: #eaeaea; padding: 15px; box-sizing: border-box; margin-right: 1%;}
h3,p{margin-top: 0px; line-height: 18px;}
.boxes-4 .box{ width:24.22%; min-height: 100px; }
.boxes-4 .box:nth-child(4){margin-right: 0px;}
.boxes-3 .box{ width: 32.63%;min-height: 100px; }
.boxes-3 .box:nth-child(3){margin-right: 0px;}
.boxes-2 .box{ width: 49.5%;min-height: 100px; }
.boxes-2 .box:nth-child(2){margin-right: 0px;}
</style>
</head>
<body>
<div class="wrapper">
<h2>Four Boxes in Each Row</h2>
<!-- Four boxes html Start -->
<section class="boxes-4">
<div class="box">
<h3>Box 1 in column #1</h3>
<p>Description here</p>
</div>
<!-- One boxe html ended -->
<div class="box">
<h3>Box 2 in column #2</h3>
<p>Description here</p>
</div>
<!-- Two boxe html ended -->
<div class="box">
<h3>Box 3 in column #3</h3>
<p>Description here</p>
</div>
<!-- Three boxe html ended -->
<div class="box">
<h3>Box 4 in column #4</h3>
<p>Description here</p>
</div>
<!-- One boxe html ended -->
</section>
<!-- Four boxes html ended -->
<h2>Three Boxes in Respective Row</h2>
<!-- Three boxes html Start -->
<section class="boxes-3 text-center">
<div class="box">
<h3>Box 1 in column #1</h3>
<p>Description here</p>
</div>
<!-- One boxe html ended -->
<div class="box">
<h3>Box 2 in column #2</h3>
<p>Description here</p>
</div>
<!-- Two boxe html ended -->
<div class="box">
<h3>Box 3 in column #3</h3>
<p>Description here</p>
</div>
</section>
<!-- Three boxes html ended -->
<h2>Two Boxes in Single Row</h2>
<!-- Two boxes html Start -->
<section class="boxes-2 text-center">
<div class="box">
<h3>Box 1 in column #1</h3>
<p>Description here</p>
</div>
<!-- One boxe html ended -->
<div class="box">
<h3>Box 2 in column #2</h3>
<p>Description here</p>
</div>
<!-- Two boxe html ended -->
</section>
<!-- Two boxes html ended -->
</div>
<!-- .wrapper html ended -->
</body>
</html>
Comments
Post a Comment