<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Ways to Inline Divs</title>
<style>
.container {
margin-bottom: 20px;
padding: 10px;
border: 1px solid #ccc;
display: none; /* Initially hide all containers */
}
.inline-div {
display: inline;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
.inline-block-div {
display: inline-block;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
.float-div {
float: left;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
margin-right: 10px;
}
.flex-container {
display: flex;
}
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.center-text {
text-align: center;
}
.absolute-position-div {
position: absolute;
top: 0;
}
.column-container {
column-count: 3;
}
pre {
background-color: #f4f4f4;
padding: 10px;
border-radius: 5px;
overflow-x: auto;
}
code {
display: block;
font-family: Consolas, monaco, monospace;
white-space: pre-wrap;
word-wrap: break-word;
}
#next-button {
margin-top: 20px;
}
</style>
</head>
<body>
<h1>8 Ways to Inline Divs</h1>
<!-- 1. Using display: inline -->
<div class="container" id="method1">
<h3>1. Using display: inline</h3>
<p>Code:</p>
<pre><code><div style="display: inline;"> ... </div></code></pre>
<div class="inline-div" style="background-color: lightblue;">Div 1</div>
<div class="inline-div" style="background-color: lightgreen;">Div 2</div>
<div class="inline-div" style="background-color: lightcoral;">Div 3</div>
</div>
<!-- 2. Using display: inline-block -->
<div class="container" id="method2">
<h3>2. Using display: inline-block</h3>
<p>Code:</p>
<pre><code><div style="display: inline-block;"> ... </div></code></pre>
<div class="inline-block-div" style="background-color: lightblue;">Div 1</div>
<div class="inline-block-div" style="background-color: lightgreen;">Div 2</div>
<div class="inline-block-div" style="background-color: lightcoral;">Div 3</div>
</div>
<!-- 3. Using float: left -->
<div class="container" id="method3">
<h3>3. Using float: left</h3>
<p>Code:</p>
<pre><code><div style="float: left;"> ... </div></code></pre>
<div class="float-div" style="background-color: lightblue;">Div 1</div>
<div class="float-div" style="background-color: lightgreen;">Div 2</div>
<div class="float-div" style="background-color: lightcoral;">Div 3</div>
</div>
<!-- 4. Using Flexbox -->
<div class="container" id="method4">
<h3>4. Using Flexbox</h3>
<p>Code:</p>
<pre><code><div style="display: flex;"> ... </div></code></pre>
<div class="flex-container">
<div style="width: 100px; height: 100px; background-color: lightblue;">Div 1</div>
<div style="width: 100px; height: 100px; background-color: lightgreen;">Div 2</div>
<div style="width: 100px; height: 100px; background-color: lightcoral;">Div 3</div>
</div>
</div>
<!-- 5. Using Grid Layout -->
<div class="container" id="method5">
<h3>5. Using Grid Layout</h3>
<p>Code:</p>
<pre><code><div style="display: grid;"> ... </div></code></pre>
<div class="grid-container">
<div style="height: 100px; background-color: lightblue;">Div 1</div>
<div style="height: 100px; background-color: lightgreen;">Div 2</div>
<div style="height: 100px; background-color: lightcoral;">Div 3</div>
</div>
</div>
<!-- 6. Using text-align: center -->
<div class="container" id="method6">
<h3>6. Using text-align: center</h3>
<p>Code:</p>
<pre><code><div style="text-align: center;"> ... </div></code></pre>
<div class="center-text">
<div class="inline-block-div" style="width: 100px; height: 100px; background-color: lightblue;">Div 1</div>
<div class="inline-block-div" style="width: 100px; height: 100px; background-color: lightgreen;">Div 2</div>
<div class="inline-block-div" style="width: 100px; height: 100px; background-color: lightcoral;">Div 3</div>
</div>
</div>
<!-- 7. Using absolute positioning -->
<div class="container" id="method7">
<h3>7. Using absolute positioning</h3>
<p>Code:</p>
<pre><code><div style="position: absolute;"> ... </div></code></pre>
<div style="position: relative; height: 150px;">
<div style="position: absolute; left: 0; background-color: lightblue; width: 100px; height: 100px;">Div 1</div>
<div style="position: absolute; left: 110px; background-color: lightgreen; width: 100px; height: 100px;">Div 2</div>
<div style="position: absolute; left: 220px; background-color: lightcoral; width: 100px; height: 100px;">Div 3</div>
</div>
</div>
<!-- 8. Using column-count -->
<div class="container" id="method8">
<h3>8. Using column-count</h3>
<p>Code:</p>
<pre><code><div style="column-count: 3;"> ... </div></code></pre>
<div class="column-container">
<div>Div 1</div>
<div>Div 2</div>
<div>Div 3</div>
<div>Div 4</div>
<div>Div 5</div>
</div>
</div>
<div class="container" id="method8">
<h3>8. Using column-count</h3>
<p>Code:</p>
<pre><code><div style="column-count: 3;"> ... </div></code></pre>
<div class="column-container">
<div>Div 1</div>
<div>Div 2</div>
<div>Div 3</div>
<div>Div 4</div>
<div>Div 5</div>
</div>
</div>
<button id="next-button" onclick="showNextMethod()">Next</button>
<script>
let currentMethod = 1;
const totalMethods = 8;
// Show the first method
document.getElementById('method1').style.display = 'block';
function showNextMethod() {
if (currentMethod < totalMethods) {
document.getElementById(`method${currentMethod}`).style.display = 'none';
currentMethod++;
document.getElementById(`method${currentMethod}`).style.display = 'block';
} else {
alert('You have reached the end!');
document.getElementById('next-button').disabled = true; // Disable the "Next" button after the last method
}
}
</script>
</body>
</html>
Comments
Post a Comment