কিভাবে তৈরি করা যায়: মিশ্র স্তম্ভ সাজ-সজ্জা

মিশ্র স্তম্ভ সাজ-সজ্জা কিভাবে তৈরি করা যায়

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

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

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

এই উদাহরণে, আমরা একটি চার স্তম্ভের সাজ-সজ্জা তৈরি করব যা 900 পিক্সেল এর নিচের স্ক্রিনের প্রস্থে ২ স্তম্ভের সাজ-সজ্জা হিসাবে রূপান্তরিত হবে। কিন্তু 600 পিক্সেলের নিচের স্ক্রিনে, স্তম্ভগুলি পাশাপাশি বসবেন, নিচে না।

/* চারটি সমান প্রস্থবিশিষ্ট স্তম্ভ তৈরি করুন এবং তাদেরকে একসঙ্গে ফ্লোটিং করুন */
.column {
  float: left;
  width: 25%;
}
/* ফ্লোটিং করে নিচে দিন */
.row:after {
  content: "";
  display: table;
   clear: both;
}
/* প্রতিক্রিয় সাজ-সজ্জা - চার স্তম্ভের সাজ-সজ্জা পরিবর্তে দুই স্তম্ভের সাজ-সজ্জা করুন */
@media screen and (max-width: 900px) {
  .column {
    width: 50%;
  }
}
/* প্রতিক্রিয় সাজ-সজ্জা - দুই স্তম্ভকে পাশাপাশি বসানোর পরিবর্তে কোঠাকোঠা হিসাবে */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

স্বয়ং প্রয়োগ করুন

相关页面

教程：সিএসএস ওয়েবসাইট লোকেশন

教程：CSS 响应式网页设计