उदाहरण
CSS से रिस्पॉन्सिव जिग जैग लेआउट बनाने के लिए, निम्न कोड का उपयोग करें:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { box-sizing:border-box; } body { margin: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } div h1{ font-size: 40px; color: blueviolet; text-align: center; } div p{ font-size: 18px; } .container { padding: 64px; } .row:after { content: ""; display: table; clear: both } .width66 { float: left; width: 66.66666%; padding: 20px; height: 471px; } .width33 { float: left; width: 33.33333%; padding: 20px; height: 471px; } .large-font { font-size: 48px; } .xlarge-font { font-size: 64px } .button { border: none; color: white; padding: 14px 28px; font-size: 16px; cursor: pointer; background-color: #4CAF50; } img { display: block; height: 250px; width: 250px; max-width: 100%; } @media screen and (max-width: 1000px) { .width66, .width33 { width: 100%; text-align: center; } img { margin: auto; } } </style> </head> <body> <h1 style="text-align:center">Responsive Zig Zag Layout Example</h2> <div class="width66"> <h1>A Gypsy</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia tempore expedita sequi consequuntur rerum quasi voluptate deleniti iure quae magni qui, laudantium illo dolorum temporibus, dolor labore, quos eos. Dolores?</p> </div> <div class="width33"> <img src="https://i.picsum.photos/id/551/800/800.jpg"> </div> <div class="width33"> <img src="https://i.picsum.photos/id/211/800/800.jpg" alt="App"> </div> <div class="width66"> <h1>A cruise ship</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia tempore expedita sequi consequuntur rerum quasi voluptate deleniti iure quae magni qui, laudantium illo dolorum temporibus, dolor labore, quos eos. Dolores?</p> </div> <div class="width66"> <h1>Natures View</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia tempore expedita sequi consequuntur rerum quasi voluptate deleniti iure quae magni qui, laudantium illo dolorum temporibus, dolor labore, quos eos. Dolores?</p> </div> <div class="width33"> <img src="https://i.picsum.photos/id/251/800/800.jpg" > </div> </div> </div> </body> </html>
आउटपुट
उपरोक्त कोड निम्न आउटपुट उत्पन्न करेगा:
हमारी स्क्रीन रिसाइज़ करने पर:
