কিভাবে তৈরি করা যায়: সমান উচ্চতার স্তম্ভ

কিভাবে CSS-এর মাধ্যমে সমান উচ্চতার স্তম্ভ তৈরি করা যায় শিখুন

কিভাবে সমান উচ্চতার স্তম্ভ তৈরি করা যায়

যখন আপনার স্তম্ভগুলি পার্শ্বস্থ দেখানো হবে, আপনি সাধারণত তাদের একই উচ্চতা হওয়ার চাই থাকে (সর্বোচ্চ উচ্চতার সাথে মাত্রার মেলবন্ধন)。

আপনাদের নিজেরাই চেষ্টা করুন

প্রথম পদক্ষেপ - এইচটিএমএল যোগ করুন:

<div class="col-container">
  <div class="col">
    <h2>স্তম্ভ ১</h2>
    <p>হেলো ওরল্ড</p>
  </div>
  <div class="col">
    <h2>স্তম্ভ ২</h2>
    <p>হেলো ওরল্ড!</p>
    <p>হেলো ওরল্ড!</p>
    <p>হেলো ওরল্ড!</p>
    <p>হেলো ওরল্ড!</p>
  </div>
  <div class="col">
    <h2>স্তম্ভ ৩</h2>
    <p>অন্যান্য টেক্সট..</p>
    <p>অন্যান্য টেক্সট..</p>
  </div>
</div>

দ্বিতীয় পদক্ষেপ - সিএসএস যোগ করুন:

.col-container {
  display: table; /* কনটেনার এলাকা টেবিল হিসাবে ব্যবহার করুন */
  width: 100%; /* পূর্ণ প্রস্থ হিসাবে সম্প্রসারিত করুন */
}
.col {
  display: table-cell; /* কনটেনারের ভিতরের উপাদানকে টেবিল সেল হিসাবে ব্যবহার করুন */
}

আপনাদের নিজেরাই চেষ্টা করুন

প্রতিক্রিয়াশীল সমান উচ্চতা

আমরা আগের উদাহরণে তৈরি করা স্তম্ভগুলি প্রতিক্রিয়াশীল (আপনি যদি ব্রাউজার প্যানেলের মাপ পরিবর্তন করেন, তবে তারা স্বয়ংক্রিয়ভাবে উচ্চতা ও প্রস্থ পরিবর্তন করবে)। কিন্তু, ছোট প্রদর্শনী (যেমন স্মার্টফোন) জন্য, আপনি স্তম্ভগুলিকে উঁচুতরফায় স্তরবদ্ধ করতে চাই না হলে পরিমাপ করুন:

এই উদ্দেশ্যে, একটি মিডিয়া কোয়াইয়ার যোগ করুন এবং এটির জন্য একটি ব্রেকপয়েন্ট পিক্সেল নির্দিষ্ট করুন:

উদাহরণ

/* 600px এর কম ব্রাউজার প্যানেল, তখন স্তম্ভগুলি স্তরবদ্ধ হবে */
@media only screen and (max-width: 600px) {
  .col {
    display: block;
    width: 100%;
  }
}

আপনাদের নিজেরাই চেষ্টা করুন

ফ্লেক্সবক্স-এর মাধ্যমে সমান উচ্চতা ও প্রস্থ রক্ষা করা

আপনি ফ্লেক্সবক্স এর মাধ্যমেও সমান উচ্চতার ফ্লেক্সবক্স বক্স তৈরি করতে পারেন:

উদাহরণ

.col-container {
  display: flex;
  width: 100%;
}
.col {
  flex: 1;
  padding: 16px;
}

আপনাদের নিজেরাই চেষ্টা করুন

প্রতিবেদন:ইন্টারনেট এক্সলোরার ১০ এবং তার আগের সংস্করণগুলি Flexbox-এর সমর্থন করে না。

相关页面

教程：CSS Flexbox