সিএসএস - ডিভগুলি আনুভূমিকভাবে সারিবদ্ধ করুন

Question 1

আমি একটি নির্দিষ্ট সঙ্গে একটি ধারক div আছে widthএবং heightসঙ্গে, overflow: hidden।

আমি ভাসমানের একটি অনুভূমিক সারি চাই: এই ধারকটির মধ্যে বাম ডিভগুলি। ডিভগুলি যা বামে ভাসিয়ে দেওয়া হয় স্বাভাবিকভাবে নীচে 'লাইনে' চাপ দেয় তারা তাদের পিতামাতার ডানদিকের আবদ্ধতা পড়ার পরে। heightপিতামাতার দ্বারা এটির অনুমতি না দেওয়া সত্ত্বেও এটি ঘটবে । এটি দেখতে এইভাবে:

! [ভুল] [1] - সরানো ইমেজ শ্যাক চিত্র যা কোনও বিজ্ঞাপন দ্বারা প্রতিস্থাপিত হয়েছিল

আমি এটি দেখতে কীভাবে চাই:

! [ডান] [2] - সরানো ইমেজ শ্যাক চিত্র যা কোনও বিজ্ঞাপন দ্বারা প্রতিস্থাপিত হয়েছিল

দ্রষ্টব্য: আমি যে প্রভাবটি চাই তা ইনলাইন উপাদানগুলি ব্যবহার করে অর্জন করা যেতে পারে এবং white-space: no-wrap(এটি চিত্রের মধ্যে আমি এটি কীভাবে করেছি)। তবে, এটি আমার পক্ষে ভাল নয় (কারণ এখানে ব্যাখ্যা করার জন্য খুব দীর্ঘ কারণেই), কারণ শিশু ডিভগুলি ব্লক স্তরের উপাদানগুলি ভাসমান হওয়া দরকার।

Question 2

আপনি ধারকটিতে একটি অভ্যন্তরীণ ডিভ রাখতে পারেন যা সমস্ত ভাসমান ডিভগুলি ধরে রাখতে যথেষ্ট প্রশস্ত।

#container {
  background-color: red;
  overflow: hidden;
  width: 200px;
}

#inner {
  overflow: hidden;
  width: 2000px;
}

.child {
  float: left;
  background-color: blue;
  width: 50px;
  height: 50px;
}

<div id="container">
  <div id="inner">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>

স্নিপেট প্রসারিত করুন

Question 3

style="overflow:hidden"পিতামাতার জন্য divএবং style="float: left"সমস্ত সন্তানের divsক্ষেত্রে divsআই 7 এবং নীচের মত পুরানো ব্রাউজারগুলির জন্য অনুভূমিকভাবে সারিবদ্ধ করা গুরুত্বপূর্ণ ।

আধুনিক ব্রাউজারগুলির জন্য, আপনি style="display: table-cell"সমস্ত শিশুর জন্য ব্যবহার করতে পারেন divsএবং এটি অনুভূমিকভাবে সঠিকভাবে রেন্ডার করতে পারে।

Question 4

এটি আপনি যা চান তার কাছাকাছি মনে হচ্ছে:

#foo {
  background: red;
  max-height: 100px;
  overflow-y: hidden;
}

.bar {
  background: blue;
  width: 100px;
  height: 100px;
  float: left;
  margin: 1em;
}

<div id="foo">
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
</div>

স্নিপেট প্রসারিত করুন

Question 5

আপনি clipসম্পত্তি ব্যবহার করতে পারেন :

#container {
  position: absolute;
  clip: rect(0px,200px,100px,0px);
  overflow: hidden;
  background: red;
}

কাজ করার জন্য প্রয়োজনীয় position: absoluteএবং নোট করুন ।overflow: hiddenclip

Question 6

আপনার প্রয়োজন হলে এখন অনুভূমিকভাবে এবং উল্লম্বভাবে সারিবদ্ধ করতে সিএসএস ফ্লেক্সবক্স ব্যবহার করতে পারেন। সাধারণ সূত্রটি এরকম হয়

parent-div {
  display: flex;
  flex-wrap: wrap;
  /* for horizontal aligning of child divs */
  justify-content: center;
  /* for vertical aligning */
  align-items: center;
}

child-div {
  width: /* yoursize for each div */
  ;
}

Question 7

ভাসা: বাম, প্রদর্শন: ইনলাইন-ব্লক উভয় ধারকগুলির ধারকের প্রস্থ অতিক্রম করলে অনুভূমিকভাবে বিন্যস্ত করতে ব্যর্থ হবে।

এটি লক্ষণীয় গুরুত্বপূর্ণ যে উপাদানগুলি অনুভূমিকভাবে প্রদর্শন করা উচিত তবে ধারকটি মোড়ানো উচিত নয়: white-space: nowrap

Question 8

তাদের বাম ভাসা। Chrome এ, কমপক্ষে, আপনার id="container"লুকাকের উদাহরণে কোনও মোড়কের দরকার নেই ।

Question 9

আপনি এর মতো কিছু করতে পারেন:

#container {
  background-color: red;
  width: 200px;
}

.child {
  background-color: blue;
  width: 150px;
  height: 50px;
}

<div id="container">
  <div id="inner">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>

স্নিপেট প্রসারিত করুন