কম্পিউটার

কিভাবে CSS এর সাথে ইমেজগুলিকে পাশাপাশি সারিবদ্ধ করবেন?

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>

আউটপুট

উপরের কোডটি নিম্নলিখিত আউটপুট −

তৈরি করবে

কিভাবে CSS এর সাথে ইমেজগুলিকে পাশাপাশি সারিবদ্ধ করবেন?


  1. কিভাবে CSS দিয়ে লেবেল স্টাইল করবেন?

  2. কিভাবে CSS দিয়ে স্ক্রলবার লুকাবেন?

  3. কিভাবে CSS দিয়ে তীর তৈরি করবেন?

  4. কিভাবে CSS এ বর্ডার ইমেজ তৈরি করবেন