একটি নমনীয় পাত্রে সমান উচ্চতার সারি

Question

আপনি দেখতে পাচ্ছেন, list-itemsপ্রথমটির মধ্যে rowএকই রকম রয়েছে height। তবে দ্বিতীয় আইটেমের rowআলাদা আছে heights। আমি চাই সমস্ত আইটেমের ইউনিফর্ম থাকে height।

স্থির-উচ্চতা না দিয়ে এবং কেবল ফ্লেক্সবক্স ব্যবহার না করে এটি অর্জনের কোনও উপায় আছে কি ?

এখানে আমার code

.list {
  display: flex;
  flex-wrap: wrap;
  max-width: 500px;
}
.list-item {
  background-color: #ccc;
  display: flex;
  padding: 0.5em;
  width: 25%;
  margin-right: 1%;
  margin-bottom: 20px;
}
.list-content {
  width: 100%;
}

<ul class="list">
  <li class="list-item">
    <div class="list-content">
      <h2>box 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
      <h3>box 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </li>

  <li class="list-item">
    <div class="list-content">
      <h3>box 2</h3>
      <p>Lorem ipsum dolor</p>
    </div>
  </li>

  <li class="list-item">
    <div class="list-content">
      <h3>box 2</h3>
      <p>Lorem ipsum dolor</p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
      <h1>h1</h1>
    </div>
  </li>
</ul>

Comments

একটি উপায় হ'ল উচ্চতায় পরিবর্তিত হতে পারে এমন উপাদানটির উপরে উচ্চতা নির্ধারণ করা

— onmyway133

Answer 1

উত্তর না হয়।

কারণটি ফ্লেক্সবক্সের নির্দিষ্টকরণে সরবরাহ করা হয়েছে:

6. ফ্লেক্স লাইন

একটি বহু-লাইন ফ্লেক্স ধারকটিতে, প্রতিটি লাইনের ক্রস আকার হ'ল নূন্যতম আকার যা লাইনটিতে ফ্লেক্স আইটেমগুলি ধারণ করতে প্রয়োজনীয়।

অন্য কথায়, যখন সারি ভিত্তিক ফ্লেক্স ধারকটিতে একাধিক লাইন থাকে, প্রতিটি লাইনের উচ্চতা ("ক্রস আকার") লাইনের নমনীয় আইটেমগুলি ধারণ করতে ন্যূনতম উচ্চতা হয়।

সমান উচ্চতার সারিগুলি, তবে সিএসএস গ্রিড লেআউটে সম্ভব:

• সিএসএস গ্রিড লেআউটে সমান উচ্চতার সারি

অন্যথায়, একটি জাভাস্ক্রিপ্ট বিকল্প বিবেচনা করুন।

Comments

সিএসএস গ্রিড কি আপাতত ব্যবহার করা নিরাপদ?

— আলেকজান্ডার কিম

Answer 2

আপনি এখন যে সাধন করতে পারেন সঙ্গে display: grid:

.list {
  display: grid;
  overflow: hidden;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  max-width: 500px;
}
.list-item {
  background-color: #ccc;
  display: flex;
  padding: 0.5em;
  margin-bottom: 20px;
}
.list-content {
  width: 100%;
}

<ul class="list">
  <li class="list-item">
    <div class="list-content">
      <h2>box 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
      <h3>box 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </li>

  <li class="list-item">
    <div class="list-content">
      <h3>box 2</h3>
      <p>Lorem ipsum dolor</p>
    </div>
  </li>

  <li class="list-item">
    <div class="list-content">
      <h3>box 2</h3>
      <p>Lorem ipsum dolor</p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
      <h1>h1</h1>
    </div>
  </li>
</ul>

যদিও গ্রিডটি নিজেই ফ্লেক্সবক্স নয় তবে এটি একটি ফ্লেক্সবক্স ধারকটির সাথে অত্যন্ত সাদৃশ্যপূর্ণ এবং গ্রিডের ভিতরে থাকা আইটেমগুলি নমনীয় হতে পারে ।

আপনি প্রতিক্রিয়াশীল গ্রিডগুলির ক্ষেত্রে গ্রিড লেআউটটিও খুব সহজ hand এটি হ'ল, যদি আপনি গ্রিডটিতে প্রতি সারিতে বিভিন্ন সংখ্যক কলাম থাকতে চান তবে আপনি কেবল পরিবর্তন করতে পারবেন grid-template-columns:

grid-template-columns: repeat(1, 1fr); // 1 column
grid-template-columns: repeat(2, 1fr); // 2 columns
grid-template-columns: repeat(3, 1fr); // 3 columns

এবং তাই ...

আপনি এটি মিডিয়া প্রশ্নের সাথে মিশ্রন করতে পারেন এবং পৃষ্ঠার আকার অনুযায়ী পরিবর্তন করতে পারেন।

দুর্ভাগ্যক্রমে ব্রাউজারগুলিতে (বাক্সের বাইরে) ধারক প্রশ্নগুলি / পৃষ্ঠার আকার অনুসারে কলামগুলির সংখ্যা পরিবর্তন করে এটি ভালভাবে কাজ করার জন্য কোনও কন্টেইনার প্রশ্ন / উপাদান উপাদান অনুসন্ধানের জন্য এখনও সমর্থন নেই (এটি ব্যবহার করা দুর্দান্ত হবে) পুনরায় ব্যবহারযোগ্য ওয়েব কম্পোনেন্ট সহ)

গ্রিড লেআউট সম্পর্কে আরও তথ্য:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Loutout

গ্রিড লেআউটটি ব্রাউজারগুলি জুড়ে সমর্থন:

https://caniuse.com/#feat=css-grid

Comments

এই ধরণের আমার পছন্দ মত "করতে পারে"! পাশাপাশি কাজের উদাহরণের জন্য ধন্যবাদ

— হান্নামার

Answer 3

না, আপনি একটি নির্দিষ্ট উচ্চতা নির্ধারণ না করে (বা কোনও স্ক্রিপ্ট ব্যবহার না করে) এটি অর্জন করতে পারবেন না।

---

আমার 2 টি উত্তর এখানে দেওয়া আছে, যা দেখায় যে কীভাবে এমন কিছু অর্জন করতে স্ক্রিপ্টটি ব্যবহার করতে হয়:

• কার্ডগুলি থেকে হেডার কীভাবে পাওয়া যায় বা ফ্লেক্স বাক্সের সাথে একই উচ্চতা পাওয়া যায়?

• ফ্লেক্স-দিক কলাম ফ্লেক্স ধারক মধ্যে ফ্লেক্স আইটেমের জন্য একই উচ্চতা height

Answer 4

আপনি যে আইটেমগুলির মাধ্যমে ম্যাপিং করছেন তা যদি আপনি জানেন তবে আপনি একবারে এক সারি করে এটি সম্পাদন করতে পারেন । আমি জানি এটি একটি কার্যকরী, কিন্তু এটি কার্যকর।

আমার জন্য আমি সারি প্রতি 4 আইটেম ছিল, তাই আমি এটা বিচ্ছেদ প্রতিটি সারির 4 দুই সারি মধ্যে height: 50%, পরিত্রাণ পেতে flex-grow, have <RowOne />এবং <RowTwo />একটি <div>সঙ্গে flex-column। এই কৌশলটি করবে

<div class='flexbox flex-column height-100-percent'>
   <RowOne class='flex height-50-percent' />
   <RowTwo class='flex height-50-percent' />
</div>

Answer 5

এটি স্থির পিতামাতার উচ্চতার ক্ষেত্রে (Chrome এবং ফায়ারফক্সে পরীক্ষিত) ক্ষেত্রে কাজ করছে বলে মনে হচ্ছে:

.child {
        height    : 100%;
        overflow  : hidden;
}

.parent {
        display: flex;
        flex-direction: column;
        height: 70vh; // ! won't work unless parent container height is set
        position: relative;
}

যদি কোনও কারণে গ্রিড ব্যবহার করা সম্ভব না হয় তবে এটির সমাধান হতে পারে।

Answer 6

প্রথম উত্তরে উল্লিখিত ইন্টারেক্টিভ বিকল্প সমাধানের বিষয়ে ... সমস্ত সারিগুলিতে একই উচ্চতা পেতে ফ্লেক্স কলামগুলিকে বাধ্য করা লোড করার পরে jQuery ব্যবহার করে করা যেতে পারে:

$(function () {
    // Set the cards height to be the same in all lines
    $('.same-wrap-height').each(function () {
        let heighest = 0;

        $('.new-card', this).each(function () {
            if ($(this).height() > heighest) {
                heighest = $(this).height();
            }
        });

        $('.new-card', this).height(heighest);
    });
});

আমার বুটস্ট্র্যাপ লেআউট:

<div class="row same-wrap-height">
    <div class="col-lg-6 ... new-card">
        <div class="card h-100">
            ...
        </div>
    </div>

    <div class="col-lg-6 ... new-card">
        <div class="card h-100">
            ...
        </div>
    </div>
</div>

Answer 7

আপনার ক্ষেত্রে উচ্চতা স্বয়ংক্রিয়ভাবে গণনা করা হবে, সুতরাং আপনাকে উচ্চতা এটি
ব্যবহার করতে হবে

.list-content{
  width: 100%;
  height:150px;
}

Comments

আমি দুঃখিত, বিষয়বস্তুর সাথে উচ্চতা আলাদা হতে পারে। সুতরাং নির্দিষ্ট উচ্চতা দিতে পারে না।

— জিনু কুরিয়ান

উচ্চতাগুলি স্বয়ংক্রিয়ভাবে গণনা করা হয়, সুতরাং আপনার বিভিন্ন সামগ্রীর সাহায্যে উচ্চতাগুলি পৃথক হবে, তাই আপনাকে স্থির উচ্চতা ব্যবহার করতে হবে অন্যথায় আপনি অভিন্ন উচ্চতা পেতে পারবেন না।

— টম

Answer 8

আপনি ফ্লেক্সবক্স দিয়ে করতে পারেন:

ul.list {
    padding: 0;
    list-style: none;
    display: flex;
    align-items: stretch;
    justify-items: center;
    flex-wrap: wrap;
    justify-content: center;
}
li {
    width: 100px;
    padding: .5rem;
    border-radius: 1rem;
    background: yellow;
    margin: 0 5px;
}

<ul class="list">
  <li>title 1</li>
  <li>title 2<br>new line</li>
  <li>title 3<br>new<br>line</li>
</ul>

Comments

আইটেমগুলি উল্লম্বভাবে স্ট্যাক করা হলে এটি সমান উচ্চতা দেয় বলে আমি মনে করি না।

— workwise

দুঃখিত, তবে আপনি আমার উত্তর নেতিবাচক পরিবর্তে অন্য উত্তর চেষ্টা করতে পারেন!

— হিশাম দালাল

Answer 9

আপনি "পি" ট্যাগের উচ্চতা স্থির করে বা "তালিকা-আইটেম" এর উচ্চতা স্থির করে এটি করতে পারেন।

আমি "পি" এর উচ্চতা স্থির করে করেছি

এবং উপচে পড়া লুকানো উচিত।

.list{
  display: flex;
  flex-wrap: wrap;
  max-width: 500px;
}

.list-item{
  background-color: #ccc;
  display: flex;
  padding: 0.5em;
  width: 25%;
  margin-right: 1%;
  margin-bottom: 20px;
}
.list-content{
  width: 100%;
}
p{height:100px;overflow:hidden;}

<ul class="list">
  <li class="list-item">
    <div class="list-content">
    <h2>box 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
    <h3>box 2</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </li>
  
    <li class="list-item">
    <div class="list-content">
    <h3>box 2</h3>
    <p>Lorem ipsum dolor</p>
    </div>
  </li>
  
    <li class="list-item">
    <div class="list-content">
    <h3>box 2</h3>
    <p>Lorem ipsum dolor</p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
      <h1>h1</h1>
    </div>
  </li>
</ul>

Comments

আমি যে উত্তরটি খুঁজছি তা মনে হচ্ছে না, যদি সামগ্রীটি আরও বড় হয় তবে এটি লুকিয়ে থাকবে।

— জিনু কুরিয়ান

@ জিনুকুরিয়ান যেখানে আমি ওভারফ্লো যুক্ত করছি: লুকানো, আপনি যদি এটি ওভারফ্লোতে পরিবর্তন করেন: স্বয়ংক্রিয়ভাবে তখন স্ক্রোল উপস্থিত হবে। তারপরে আপনি সম্পূর্ণ

— অজয় মালহোত্রা

Answer 10

একই উচ্চতার জন্য আপনার সিএসএস "প্রদর্শন" বৈশিষ্ট্যগুলি ছড়িয়ে দেওয়া উচিত। আরও বিশদের জন্য প্রদত্ত উদাহরণ দেখুন।

.list{
  display: table;
  flex-wrap: wrap;
  max-width: 500px;
}

.list-item{
  background-color: #ccc;
  display: table-cell;
  padding: 0.5em;
  width: 25%;
  margin-right: 1%;
  margin-bottom: 20px;
}
.list-content{
  width: 100%;
}

<ul class="list">
  <li class="list-item">
    <div class="list-content">
    <h2>box 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
    <h3>box 2</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </li>
  
    <li class="list-item">
    <div class="list-content">
    <h3>box 2</h3>
    <p>Lorem ipsum dolor</p>
    </div>
  </li>
  
    <li class="list-item">
    <div class="list-content">
    <h3>box 2</h3>
    <p>Lorem ipsum dolor</p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
      <h1>h1</h1>
    </div>
  </li>

Comments

ধন্যবাদ তবে আমি একাধিক সারিগুলিতে তালিকা প্রদর্শন করতে চাই।

— জিনু কুরিয়ান