উদাহরণ
নিচের কোডটি CSS ব্যবহার করে ইমেজগুলোকে সাইড বাই সাইড অ্যালাইন করার উদাহরণ:
<!DOCTYPE html> <html> <head> <style> * { box-sizing: border-box; } .imageColumn { float: left; width: 25%; padding: 10px; } h1{ text-align: center; } </style> </head> <body> <h1>Images Aligned Side by Side example</h1> <div class="alignRow"> <div class="imageColumn"> <img src="https://i.picsum.photos/id/811/400/400.jpg" alt="Snow" style="width:100%"> </div> <div class="imageColumn"> <img src="https://i.picsum.photos/id/871/400/400.jpg" alt="Forest" style="width:100%"> </div> <div class="imageColumn"> <img src="https://i.picsum.photos/id/471/400/400.jpg" alt="Mountains" style="width:100%"> </div> <div class="imageColumn"> <img src="https://i.picsum.photos/id/271/400/400.jpg" alt="Snow" style="width:100%"> </div> </div>> </body> </html>
আউটপুট
উপরের কোডটি নিচের আউটপুটটি তৈরি করবে:
