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


85

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

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

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

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

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

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


8
আপনার চিত্রের লিঙ্কগুলি ভেঙে গেছে বলে মনে হচ্ছে। যদি এখনও আপনার কাছে অরিজিনাল থাকে তবে দয়া করে এগুলি stack.imgur এ পুনরায় আপলোড করুন। ধন্যবাদ!
ইলমারি করোনেন

উত্তর:


100

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

#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>


তাহলে আমি কীভাবে আউটটার ডিভ সেন্টার করব? আমি আউটটার ডিভের সাথে এলাইন = "সেন্টার" যুক্ত করার চেষ্টা করেছি, মনে হয় এটি কাজ করে না।
হাকুনামী

4
এটি শতাংশ প্রস্থের জন্যও কাজ করে। আমার ক্ষেত্রে আমি একটি ধারক ডিভি ব্যবহার করছি width: 200%;এবং শিশু উপাদানগুলি প্রতিটি width: 50%;। তারপরে transform: translateX(n%);আমি overflow: hidden;
কারেন্টুলের

31

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

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


6

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

#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>


5

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

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

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


4
ক্লিপ ব্রাউজার সমর্থন কি?
অ্যালেক্স

4
W3schools.com/cssref/pr_pos_clip.asp থেকে : ক্লিপ সম্পত্তি সমস্ত বড় ব্রাউজারে সমর্থিত। দ্রষ্টব্য: "উত্তরাধিকারী" মানটি আই 7 এবং এর আগে সমর্থিত নয়। আইই 8 এর জন্য একটি ডক্টইপিই প্রয়োজন। আইই 9 "উত্তরাধিকারী" সমর্থন করে।
dsomnus

5

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

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 */
  ;
}

মার্জিত সমাধান।
zawhtut

4

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

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


1

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


0

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

#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>

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.