Skip to main content

How to Inline Divs in HTML: 8 Methods Explained (Flexbox, Grid, Inline, and More)

 <!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>&lt;div style="display: inline;"&gt; ... &lt;/div&gt;</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>&lt;div style="display: inline-block;"&gt; ... &lt;/div&gt;</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>&lt;div style="float: left;"&gt; ... &lt;/div&gt;</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>&lt;div style="display: flex;"&gt; ... &lt;/div&gt;</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>&lt;div style="display: grid;"&gt; ... &lt;/div&gt;</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>&lt;div style="text-align: center;"&gt; ... &lt;/div&gt;</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>&lt;div style="position: absolute;"&gt; ... &lt;/div&gt;</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>&lt;div style="column-count: 3;"&gt; ... &lt;/div&gt;</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>&lt;div style="column-count: 3;"&gt; ... &lt;/div&gt;</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

Popular posts from this blog

Resin Art: एक संपूर्ण और विस्तृत गाइड

परिचय Resin Art एक अनोखी और आकर्षक कला है, जिसमें epoxy resin और hardener का उपयोग किया जाता है। इसे सही अनुपात में मिलाकर अलग-अलग रंग, पिगमेंट, ग्लिटर और अन्य सजावटी तत्वों के साथ मिलाया जाता है, जिससे चमकदार और आकर्षक डिज़ाइन तैयार किए जाते हैं। यह गाइड आपको शुरुआत से लेकर एडवांस लेवल तक की सभी जरूरी जानकारी देगी। 1. Resin Art के लिए आवश्यक सामग्री इस कला को शुरू करने के लिए आपको निम्नलिखित सामग्री की आवश्यकता होगी: मुख्य सामग्री: ✔ Epoxy Resin और Hardener – रेज़िन को सख्त बनाने के लिए। ✔ Silicone Molds / Canvas / MDF Board – जिस पर डिज़ाइन बनाया जाएगा। ✔ Acrylic Colors / Resin Pigments – रंग जोड़ने के लिए। ✔ Mixing Cups & Wooden Sticks – मिक्सिंग के लिए। ✔ Heat Gun / Torch – एयर बबल्स हटाने के लिए। ✔ Gloves और Mask – सुरक्षा के लिए। ✔ Glitter, Stones, Gold Flakes – डेकोरेशन के लिए। ✔ Sandpaper & Polish – फिनिशिंग टच के लिए। 2. Resin Art की तैयारी कैसे करें? सुरक्षा उपाय: ✅ वेंटिलेटेड एरिया में काम करें – रेज़िन से निकलने वाली गैसों से बचने के लिए। ✅ ग्लव्स और मास्क प...
Post a Comment
Read more

50 Viral Google Gemini Prompts for Beginners: Create Stunning AI Images

Artificial Intelligence is changing the way we create digital art. Google Gemini is one of the newest AI platforms that allows anyone to generate beautiful, creative images using just text prompts. Whether you want retro Bollywood portraits, toy-style figurines, or fantasy characters, Gemini makes it easy—even for beginners! In this guide, we’ll explain how beginners can start using Google Gemini and show 50 example prompts to create viral, eye-catching images. What is Google Gemini? Google Gemini is a multimodal AI tool that generates images from text descriptions. You simply type what you want to see, and Gemini creates a realistic, stylized, or artistic image based on your instructions. For example, you can type: "Convert my selfie into a 90s Bollywood actress in chiffon saree, soft golden glow, vintage cinematic filter" … and Gemini will produce a retro Bollywood-style portrait. No drawing skills are required—just imagination and descriptive text. How to Use Prompts ...
Post a Comment
Read more

Business advertiser website in Angular with PHP that caters to different user roles, such as Admin, New User, and Registered User

 To create a business advertiser website in Angular with PHP that caters to different user roles, such as Admin, New User, and Registered User, you can follow these steps: 1. Set up the development environment:    - Install Node.js and npm for Angular.    - Install PHP and set up a local server like Apache or Nginx. 2. Create a new Angular project:    - Open a terminal or command prompt and run the following command:      ```      npx @angular/cli new business-advertiser-website      ``` 3. Navigate into the project directory:    ```    cd business-advertiser-website    ``` 4. Generate Angular components and services:    - Run the following commands to generate the necessary components and services:      ```      ng generate component home      ng generate component admin      ng generate component user  ...
Post a Comment
Read more