Computer >> कंप्यूटर ट्यूटोरियल >  >> प्रोग्रामिंग >> CSS

CSS से समान ऊंचाई वाले कॉलम कैसे बनाएं?


CSS से समान ऊंचाई वाले कॉलम बनाने के लिए, कोड निम्नानुसार है -

उदाहरण

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>    body {       font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    }    .container {       display: table;       width: 100%;    }    .column {       display: table-cell;       padding: 16px;       background-color: greenyellow;    }    .column:nth-of-type(2n-1) {       color: red;       background-color: yellow;    } </style> </head> <body> <h1>Equal Height Columns Example</h1> <div class="container"> <div class="column"> <h2>Column 1</h2> <h2>Column 1</h2> <h2>Column 1</h2> </div> <div class="column"> <h2>Column 2</h2> <h2>Column 2</h2> <h2>Column 2</h2> </div> <div class="column"> <h2>Column 3</h2> <h2>Column 3</h2> <h2>Column 3</h2> </div> </div> </body> </html>

आउटपुट

उपरोक्त कोड निम्न आउटपुट उत्पन्न करेगा -

CSS से समान ऊंचाई वाले कॉलम कैसे बनाएं?


  1. CSS से तीर कैसे बनाएं? CSS से तीर कैसे बनाएं?

    CSS से तीर बनाने के लिए, कोड निम्नानुसार है -उदाहरण<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>    body {       font-family: "Segoe UI", Tahoma, Geneva

  1. CSS से रिस्पॉन्सिव कॉलम कार्ड कैसे बनाएं? CSS से रिस्पॉन्सिव कॉलम कार्ड कैसे बनाएं?

    उदाहरण CSS से रिस्पॉन्सिव कॉलम कार्ड बनाने के लिए, निम्न कोड का उपयोग करें: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>    body {       font-family: "Segoe

  1. CSS से मिक्स्ड कॉलम लेआउट ग्रिड कैसे बनाएं? CSS से मिक्स्ड कॉलम लेआउट ग्रिड कैसे बनाएं?

    उदाहरण CSS से मिक्स्ड कॉलम लेआउट ग्रिड बनाने के लिए, निम्न कोड का उपयोग करें: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>    body {       font-family: "Seg