Div box is very useful for web design. Here i have shown how you can display your div box side by side using inline-block CSS.
Code :
Index.html
<html>
<head>
<title>Inline Block Example With Div Box</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="div-box"></div>
<div class="div-box"></div>
<div class="div-box"></div>
<div class="div-box"></div>
<div class="div-box"></div>
<div class="div-box"></div>
<div class="div-box"></div>
<div class="div-box"></div>
<div class="div-box"></div>
<div class="div-box"></div>
<div class="div-box"></div>
<div class="div-box"></div>
</body>
</html>
Code :
main.css
.div-box {
width: 200px;
height: 200px;
background-color: gray;
display: inline-block;
}
Output :
IDE Used To Test This Code : Google Chrome.
Try this code in your computer for better understanding. Enjoy the code. If you have any Question you can contact us or mail us.We will reply you as soon as possible.
Code :
Index.html
<html>
<head>
<title>Inline Block Example With Div Box</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="div-box"></div>
<div class="div-box"></div>
<div class="div-box"></div>
<div class="div-box"></div>
<div class="div-box"></div>
<div class="div-box"></div>
<div class="div-box"></div>
<div class="div-box"></div>
<div class="div-box"></div>
<div class="div-box"></div>
<div class="div-box"></div>
<div class="div-box"></div>
</body>
</html>
Code :
main.css
.div-box {
width: 200px;
height: 200px;
background-color: gray;
display: inline-block;
}
Output :
IDE Used To Test This Code : Google Chrome.
Try this code in your computer for better understanding. Enjoy the code. If you have any Question you can contact us or mail us.We will reply you as soon as possible.
Post a Comment