কিভাবে তৈরি করা যায়: দুটি সাবলীন সাজসজ্জা

কিভাবে দুটি সাবলীন সাজসজ্জা তৈরি করা যায়

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

<div class="row">
  <div class="column"></div>
  <div class="column"></div>
</div>

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

এই উদাহরণে, আমরা দুটিসমপ্রস্থানএর সাবলীন ক্ষেত্র:

ফ্লটিং উদাহরণ

.column {
  float: left;
  width: 50%;
}
/* সাবলীন ক্ষেত্রের পরের ফ্লটিং নিরসন */
.row:after {
  content: "";
  display: table;
  clear: both;
}

আপনার হাতে পরীক্ষা করুন

দুটি সাবলীন সাজসজ্জা তৈরির আধুনিক পদ্ধতি হল CSS Flexbox। কিন্তু, এটি Internet Explorer 10 এবং তার আগের সংস্করণগুলির সমর্থন করে না。

Flex উদাহরণ

.row {
  display: flex;
}
.column {
  flex: 50%;
}

আপনার হাতে পরীক্ষা করুন

আপনি ফ্লটিং বা flex ব্যবহার করতে পারেন, দুটি সাবলীন সাজসজ্জা তৈরি করতে। কিন্তু, যদি আপনি IE10 এবং তার আগের সংস্করণগুলির সমর্থন চান, তাহলে ফ্লটিং ব্যবহার করুন。

পরামর্শ:যদি আপনি Flexible Box Layout Module সম্পর্কে আরও বিস্তারিত জানতে চান, তাহলে আমাদের CSS Flexbox শিক্ষাদত্ত্র。

এই উদাহরণে, আমরা দুটি বিভিন্ন প্রস্থানের সাবলীন ক্ষেত্র তৈরি করবো:

উদাহরণ

.column {
  float: left;
}
.left {
  width: 25%;
}
.right {
  width: 75%;
}

আপনার হাতে পরীক্ষা করুন

এই উদাহরণে, আমরা একটিপ্রতিক্রিয়দুটি সাবলীন সাজসজ্জা:

উদাহরণ

/* প্রতিক্রিয় সাজসজ্জা - যখন সক্রিয়কারীর প্রস্থান 600px এর নীচে থাকে, দুটি সাবলীন ক্ষেত্রকে একসাথে মিলিয়ে দিয়ে সাজানো হবে, না এককভাবে */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

আপনার হাতে পরীক্ষা করুন

সংশ্লিষ্ট পাতা

শিক্ষাদত্ত্রসিএসএস ওয়েবসাইট লেআউট

শিক্ষাদত্ত্রCSS প্রতিক্রিয় ওয়েব ডিজাইন