আমি কীভাবে একই উচ্চতায় দুটি পাশাপাশি পাশের ডিভস রাখব?

Question

পাশাপাশি আমার দুটি ডিভ রয়েছে। আমি তাদের উচ্চতা একই হতে চাই এবং তাদের মধ্যে যদি কোনওটির আকার পরিবর্তন হয় তবে একই থাকব। যদিও আমি এটিকে বের করতে পারি না। ধারনা?

আমার বিভ্রান্তিকর প্রশ্নটি পরিষ্কার করার জন্য, আমি উভয় বাক্স সবসময় একই আকারের হওয়া চাই, তাই যদি পাঠ্যটি এতে স্থাপন করা হয় তবে অন্যটি উচ্চতার সাথে মিলে যায়।

<div style="overflow: hidden">
    <div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px">
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
    </div>
    <div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px">
        Some content!
    </div>
</div>

Comments

আপনি কি চান যে তাদের মধ্যে যদি একটি বড় হয়ে যায় তবে অন্যটির চেয়ে একই উচ্চতার আকারটি থেকে যায়?

— ওয়াই ওয়াং

একটি সমাধান নয় যা একটি সম্পাদনযোগ্য পরিবেশে রয়েছে এমন একটি উদাহরণ এখানে পাওয়া যাবে: jsfiddle.net/PCJUQ

— MvanGeest

জাভাস্ক্রিপ্ট ব্যবহার করুন: স্ট্যাকওভারফ্লো

— .

Answer 1

flexbox

ফ্লেক্সবক্সের সাহায্যে এটি একক ঘোষণা:

.row {
  display: flex; /* equal height of the children */
}

.col {
  flex: 1; /* additionally, equal width */
  
  padding: 1em;
  border: solid;
}

<div class="row">
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.</div>
</div>

পুরানো ব্রাউজারগুলির জন্য উপসর্গের প্রয়োজন হতে পারে, ব্রাউজার সমর্থন দেখুন ।

Comments

ফ্লেক্সবক্স একটি কবজির মতো কাজ করেছিল। আপনি যদি একটি প্রতিক্রিয়াশীল ডিজাইন বিকাশ করছেন এবং আপনি যদি চান যে আপনার দ্বিতীয় ডিভিটি ছোট স্ক্রিনে নেমে যেতে পারে আপনাকে প্রদর্শন করতে .row সেট করতে হবে: ব্লক; আপনার মিডিয়া ক্যোয়ারী।

— নিক জুলু

@ নিকজুলু এই ক্ষেত্রে আপনার বিশ্বাস করা উচিত যে আপনার সেট করা উচিত flex-direction: column: jsfiddle.net/sdsgW/1

— পাভলো

@ Ekestein এটি উভয় সমাধানের জন্য প্রয়োজন। ডেমো দেখুন।

— পাভলো

আমি উচ্চতা যোগ না করা পর্যন্ত এটি আমার পক্ষে কাজ করছে না: 100%; বাচ্চাদের কলামগুলিতে

— জ্যাকব র্যাকুইয়া

একটি নির্দিষ্ট শিশু ডিভ অন্যের উচ্চতা নির্ধারণ করা সম্ভব? যাতে যদি অন্য শিশু

— ডিভের

Answer 2

এটি একটি সাধারণ সমস্যা যা অনেকের মুখোমুখি হয়েছিল, তবে ভাগ্যক্রমে এড এলিয়টসের মতো কিছু স্মার্ট মন তাঁর ব্লগে তাদের সমাধানগুলি অনলাইনে পোস্ট করেছে।

মূলত আপনি যা করেন তা হ'ল উভয় ডিভ / কলামকে খুব লম্বা করে একটি padding-bottom: 100%এবং তারপরে "ব্রাউজারটিকে ট্রিক করুন" ভেবে যে তারা যে লম্বাটি ব্যবহার করছেন তা নয় margin-bottom: -100%। এটি এড এলিয়ট তার ব্লগে আরও ভালভাবে ব্যাখ্যা করেছেন, এর মধ্যে আরও অনেক উদাহরণ রয়েছে।

.container {
    overflow: hidden;
}
.column {
    float: left;
    margin: 20px;
    background-color: grey;
    padding-bottom: 100%;
    margin-bottom: -100%;
}

<div class="container">

    <div class="column">
        Some content!<br>
        Some content!<br>
        Some content!<br>
        Some content!<br>
        Some content!<br>
    </div>

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

</div>

Comments

ওয়ান ট্রু লেআউট সম্পর্কে ব্যাখ্যাটি কিছুটা দুর্বল ছিল, তবে প্রথম লিঙ্কটি যাচাই করার পরে আমি তার ব্যবহার করা উদাহরণগুলির মধ্যে একটি থেকে এটি সূক্ষ্মভাবে প্রয়োগ করেছি। তবে এটি সত্যিই খারাপ কারণ আপনার কলামগুলির নীচের সীমান্ত উপস্থাপন করতে একটি চিত্র ব্যবহার করতে হবে এবং এটি ক্রস ব্রাউজার সমর্থনের জন্য সন্দেহজনক। তবে এটি কাজ করে এবং এটি জাভাস্ক্রিপ্টের উপর নির্ভর করে না, তাই আমি এটিকে সঠিক হিসাবে চিহ্নিত করব। ধন্যবাদ!

— নিবল্বিপিগ

পুরানো আই ব্রাউজারগুলিতে এটি কাজ করছে বলে মনে হচ্ছে না (হ্যাঁ, দুর্ভাগ্যক্রমে এখনও আই আই 6 সমর্থন করতে হবে)। এটিকে সামঞ্জস্য করার কোনও উপায়?

— strongriley

@ স্ট্রংগ্রিলি চেকআউট এড এলিয়টের ব্লগ: ejeliot.com/blog/61 এটি আই 6 এ কাজ করা উচিত। সমস্যাটি অন্য কোথাও সৃষ্টি হতে পারে?

— mqchen

উইন্ডোটি খুব সংকীর্ণ হলে এবং ডিভগুলি একে অপরের নীচে রাখলে এটি বিরতি দেয়।

— নটহাগো

আপনি যদি সারণি ঘরে উপস্থিত থাকতে চান এমন সেল প্যাডিং কীভাবে সংজ্ঞায়িত করবেন, উদাহরণস্বরূপ padding: 7px 10px, padding-bottomসম্পত্তিটি যদি 100% সেট করা থাকে? ( overflow:hiddenrow

— পিএসও

Answer 3

এটি এমন একটি অঞ্চল যেখানে সিএসএসের সত্যিই কখনও কোনও সমাধান হয়নি - আপনি <table>ট্যাগ ব্যবহার করতে চলেছেন (বা সিএসএস ব্যবহার করে তা জালিয়াতি করছেন)display:table* মানগুলি ), কারণ এটিই সেই একমাত্র জায়গা যেখানে "একই উপাদানগুলির একগুচ্ছ রাখুন" প্রয়োগ করা হয়েছিল।

<div style="display: table-row;">

    <div style="border:1px solid #cccccc; display: table-cell;">
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
    </div>

    <div style="border:1px solid #cccccc;  display: table-cell;">
        Some content!
    </div>

</div>

এটি ফায়ারফক্স, ক্রোম এবং সাফারি, কমপক্ষে 8 সংস্করণ থেকে অপেরা এবং সংস্করণ 8 থেকে আইই এর সমস্ত সংস্করণে কাজ করে।

Comments

এই সমাধানটি তাদের জন্য উপলভ্য নয় যাদের আইআই 6 / আই 7 সমর্থন করতে হবে তবে আমি বিশ্বাস করি এটি সবচেয়ে পরিষ্কার clean

— 6:30

এই উত্তরটি নিখুঁত! কেবলমাত্র একটি ছোট্ট অনুস্মারক: এটি হতে পারে যে কোনও ক্লায়েন্টের "টেবিল-সারি" এর পরিবর্তে "টেবিল" প্রয়োজন

— টিবোরকা

@ ব্যবহারকারী 2025810: ওহ, আপনাকে ধন্যবাদ। আপনি কি জানেন যে কোন ক্লায়েন্টের tableপরিবর্তে প্রয়োজন table-row?

— পল ডি ওয়েট

@ ইউজার২২২৫৮১০: হ্যাঁ, আমি কখনই এটি পরীক্ষা করে বলতে পারি না :) তবে চিয়ার্স জেনে রাখা ভাল। (এর পিডিএফ ফোকাস দেওয়া আমি বাজি ধরেছি যে এটি সিএসএস ২.১-এর কিছু মুদ্রণ-সম্পর্কিত বৈশিষ্ট্য সমর্থন করে যা ব্রাউজারগুলিতে খুব ভালভাবে প্রয়োগ করা হয় না))

— পল ডি ওয়েট

এই সমাধানের সাহায্যে - widthআপনার ডিভগুলির জন্য শতাংশ ব্যবহার সম্পর্কে ভুলে যাবেন না যদি না আপনি display: tableঅভিভাবক উপাদানটিতে যোগ না করেন যা জিনিসগুলিকে গোলমাল করবে।

— অ্যালেক্স জি

Answer 4

JQuery ব্যবহার করে

JQuery ব্যবহার করে, আপনি এটি একটি সুপার সিম্পল এক-লাইন স্ক্রিপ্টে করতে পারেন।

// HTML
<div id="columnOne">
</div>

<div id="columnTwo">
</div>

// Javascript
$("#columnTwo").height($("#columnOne").height());

সিএসএস ব্যবহার করে

এটি কিছুটা আকর্ষণীয়। কৌশলটি ফ্যাক্স কলাম বলে । কম বেশি আপনি প্রকৃত উচ্চতা একই হিসাবে সেট করেন না তবে আপনি কিছু গ্রাফিকাল উপাদানগুলিকে ছাঁটাই করেন যাতে তারা একই উচ্চতা দেখায় ।

Comments

আমি মনে করি জাভাস্ক্রিপ্ট ব্যবহার করা খুব ভাল পদ্ধতি। সমস্যাটি হ'ল - অক্ষম থাকলে তা পৃথক হয়ে যায়। আমি মনে করি আমি এটিকে যাইহোক ব্যবহার করব এবং আমি যতটা সম্ভব সেরা কন্টিনজেন্সি তৈরি করব; -) ধন্যবাদ!

— নিকোরেলিয়াস

এটি সূচিত করে যে কলামের একের উচ্চতা সর্বদা কলামটিউ-এর চেয়ে বড়।

— সাবস্টিয়ান রিচার

কলামগুলির উচ্চতা প্রয়োগ করার আগে আপনার তাদের উচ্চতার তুলনা করা উচিত। আমি মনে করি এই সমস্যাটির জন্য জেএস হ'ল সর্বোত্তম পদ্ধতি, প্রায় সমস্ত ব্রাউজার জেএস সক্ষম হয়, যদি না হয় তবে তাদের আপনার ওয়েবসাইট এবং অন্যান্য অনেক ওয়েবসাইট থেকে বেরিয়ে আসা উচিত।

— সালমানশারিটি

পৃষ্ঠাটি প্রথম লোড করা হলে এটি কেবল কাজ করবে। উইন্ডোটিকে যদি পুনরায় আকার দেওয়া হয়,

— ডিভগুলি

Answer 5

আমি অবাক হয়েছি যে কেউই (খুব পুরানো তবে নির্ভরযোগ্য) পরম কলামের কৌশলটি উল্লেখ করেনি: http://24ways.org/2008/absolve-colouts/

আমার মতে, এটি ফক্স কলাম এবং ওয়ান ট্রু লেআউট এর কৌশল উভয়ের চেয়ে অনেক বেশি উন্নত।

সাধারণ ধারণাটি হ'ল একটি উপাদানটি position: absolute;নিকটতম পিতা-মাতার উপাদানটির সাথে অবস্থান করবে position: relative;। তারপরে আপনি একটি top: 0px;এবং bottom: 0px;(বা আপনার যে কোনও পিক্সেল / শতাংশ যা প্রয়োজন তা নির্ধারণ করে) 100% উচ্চতা পূরণ করতে একটি কলাম প্রসারিত করুন Here এখানে একটি উদাহরণ রয়েছে:

<!DOCTYPE html>
<html>
  <head>
    <style>
      #container
      {
        position: relative;
      }

      #left-column
      {
        width: 50%;
        background-color: pink;
      }

      #right-column
      {
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: 0px;
        width: 50%;
        background-color: teal;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="left-column">
        <ul>
          <li>Foo</li>
          <li>Bar</li>
          <li>Baz</li>
        </ul>
      </div>
      <div id="right-column">
        Lorem ipsum
      </div>
    </div>
  </body>
</html>

Comments

যদি ডান কলামে বামের চেয়ে বেশি লাইন থাকে তবে সামগ্রীটি উপচে পড়বে।

— ডেভিড

Answer 6

আপনি Jquery এর সমান উচ্চতা প্লাগইন ব্যবহার করতে পারেন, এই প্লাগইনগুলি ঠিক একই উচ্চতার সমস্ত ভাগকে অন্য হিসাবে তৈরি করে। এর মধ্যে একটি বাড়লে অন্যটিও বাড়বে।

এখানে বাস্তবায়নের একটি নমুনা

Usage: $(object).equalHeights([minHeight], [maxHeight]);

Example 1: $(".cols").equalHeights(); 
           Sets all columns to the same height.

Example 2: $(".cols").equalHeights(400); 
           Sets all cols to at least 400px tall.

Example 3: $(".cols").equalHeights(100,300); 
           Cols are at least 100 but no more than 300 pixels tall. Elements with too much content will gain a scrollbar.

লিঙ্কটি এখানে

http://www.cssnewbie.com/equalheights-jquery-plugin/

Answer 7

আপনি ফক্স কলামগুলি ব্যবহার করতে পারেন ।

মূলত এটি দুটি সম-উচ্চতা-ডিআইভি অনুকরণ করতে একটি ডিআইভিযুক্ত একটি পটভূমি চিত্র ব্যবহার করে। এই কৌশলটি ব্যবহার করে আপনাকে আপনার ধারকগুলিতে ছায়া, বৃত্তাকার কোণ, কাস্টম সীমানা বা অন্যান্য মজাদার ধরণ যুক্ত করার অনুমতি দেয়।

যদিও স্থির-প্রস্থের বাক্সগুলির সাথে কেবল কাজ করে।

ভালভাবে পরীক্ষিত এবং প্রতিটি ব্রাউজারে সঠিকভাবে কাজ করা।

Answer 8

এই খুব উত্তরের সন্ধানের সময় এই থ্রেডটি কেবল চিহ্নিত করেছে। আমি সবেমাত্র একটি ছোট jQuery ফাংশন করেছি, আশা করি এটি সাহায্য করবে, কবজির মতো কাজ করবে:

অবশ্যই JAVASCRIPT

var maxHeight = 0;
$('.inner').each(function() {
    maxHeight = Math.max(maxHeight, $(this).height());
});
$('.lhs_content .inner, .rhs_content .inner').css({height:maxHeight + 'px'});

এইচটিএমএল

<div class="lhs_content">
    <div class="inner">
        Content in here
    </div>
</div>
<div class="rhs_content">
    <div class="inner">
        More content in here
    </div>
</div>

Comments

আমি প্যাডিং এবং সীমানাগুলি অন্তর্ভুক্ত করতে আউটহাইট ব্যবহার করেছি। এটি আমার মনে হয় সবচেয়ে পরিষ্কার সমাধান।

— সাবস্টিয়ান রিচার

আমি নিখুঁত সমাধান খুঁজছিলাম। অন্যান্য সমাধানের ক্ষেত্রে সারিটির কয়েকটি কলাম থাকতে পারে তবে জটিল এইচটিএমএল বিষয়বস্তুর জন্য এই পদ্ধতিটি আরও ভাল। ছোট যোগ করা: যখন দস্তাবেজ প্রতিক্রিয়াশীল পৃষ্ঠায় পুনরায় আকার দিন, স্থির কারণে সামগ্রীর উচ্চতা পরিবর্তন হয় না। সুতরাং, আমি added ('অভ্যন্তরীণ') যুক্ত করেছি। সিএসএস ({উচ্চতা: "প্রাথমিক"}); 'প্রতিটি ফাংশন' আগে ডিফল্ট উচ্চতা সেট করতে।

— বাফসার

Answer 9

সিএসএস গ্রিড উপায়

এটি করার আধুনিক উপায় (যা <div class="row"></div>প্রতি দুটি আইটেমের চারপাশে একটি- র‍্যাপার ঘোষণা করা এড়ানো হয়) হ'ল একটি সিএসএস গ্রিড ব্যবহার করা। এটি আপনাকে আপনার আইটেমের সারি / কলামগুলির মধ্যে ফাঁকগুলি সহজ নিয়ন্ত্রণ দেয়।

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* or simply "1fr 1fr;" */
  grid-row-gap: 10px; 
  grid-column-gap: 10px;
}

.grid-item {
  background-color: #f8f8f8;
  box-shadow: 0 0 3px #666;
  text-align: center;
}

.grid-item img {
  max-width: 100%;
}

<div class="grid-container">
  <div class="grid-item">1 <br />1.1<br />1.1.1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3
    <img src="https://lorempixel.com/420/320/abstract/1/Sample" alt="" />
    3.1
  </div>
  <div class="grid-item">4</div>
  <div class="grid-item">5 <br />1.1<br />1.1.1</div>
  <div class="grid-item">6<img src="https://lorempixel.com/400/300/abstract/" alt="" />
    6.1</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9 <br />1.1<br />1.1.1</div>
  <div class="grid-item">10</div>
  <div class="grid-item">11
    <img src="https://lorempixel.com/420/320/abstract/1/Sample" alt="" />
    11.1
  </div>
  <div class="grid-item">12</div>
</div>

Answer 10

এই প্রশ্নটি 6 বছর আগে জিজ্ঞাসা করা হয়েছিল, তবে এটি এখনও ফ্লেক্সবক্সের সাথে একটি সহজ উত্তর দেওয়ার উপযুক্ত আজকাল লেআউট ।

কেবল বাবার সাথে নিম্নলিখিত সিএসএস যুক্ত করুন <div>, এটি কার্যকর হবে।

display: -webkit-flex;
display: flex;
flex-direction: row;
align-items: stretch;

প্রথম দুটি লাইন ঘোষণা করে যে এটি ফ্লেক্সবক্স হিসাবে প্রদর্শিত হবে। এবং flex-direction: rowব্রাউজারগুলিকে বলে যে এর বাচ্চারা কলামগুলিতে প্রদর্শিত হবে। এবং align-items: stretchপ্রয়োজনীয়তাটি পূরণ করবে যে সমস্ত শিশু উপাদান একই উচ্চতায় প্রসারিত হবে এটি তাদের মধ্যে একটি উচ্চতর হবে।

Comments

@ টাইলারএইচ তবে জিজ্ঞাসা করা হয়েছে তার প্রশ্নটি সম্পাদনা করেছে এবং যুক্ত করেছেন I'd like both boxes to always be the same size, so if one grows because text is placed into it, the other one should grow to match the height.যা গ্রহণিত উত্তরে উল্লেখ করা হয়নি ... আমি এখানে একটি সম্পূর্ণ করেছি। সম্ভবত আমার এটি গ্রহণ করা উত্তরে মন্তব্য করা উচিত ছিল?

— হেগউইন

এটি স্পষ্টভাবে উল্লেখ করা হয়নি কারণ এটি ইতিমধ্যে সাধারণ সিএসএস ঘোষণার মাধ্যমে ইতিমধ্যে আচ্ছাদিত। পূর্ণস্ক্রিনে উত্তরের স্নিপেট খুলুন এবং দেখতে আপনার ব্রাউজার উইন্ডোটির আকার পরিবর্তন করুন; তারা একে অপরের মতো একই আকারে থাকে।

— টাইলারএইচ

এমনকি যদি গৃহীত উত্তরটি ফ্লেক্সবক্স ব্যবহার করে তবে এটির একটি আলাদা পদ্ধতির রয়েছে। সারিবদ্ধ-আইটেমগুলি: প্রসারিত হ'ল আমাকে খুব বিশেষ পরিস্থিতিতে আমার সমস্যা সমাধানের পথে নিয়ে যায়।

— বেনোইটলুসিয়ার

নন align-items: stretch;আনমন ডিফল্ট?

— ম্যাডাভ

Answer 11

সিএসএস ফ্লেক্সবক্স এবং ন্যূনতম উচ্চতা ব্যবহার করা আমার পক্ষে কাজ করেছিল

বলুন আপনার ভিতরে দুটি ডিভের সাথে একটি ধারক রয়েছে এবং আপনি চান যে দুটি ডিভ একই উচ্চতা হোক।

আপনি ধারকটিতে ' প্রদর্শন: ফ্লেক্স ' পাশাপাশি ' সারিবদ্ধ-আইটেম: প্রসারিত ' সেট করবেন

তারপরে, শিশুটিকে মাত্র 100% এর একটি ' ন্যূনতম উচ্চতা ' দিন

নীচের কোডটি দেখুন

.container {
  width: 100%;
  background: linear-gradient(red,blue);
  padding: 1em;
  /* important */
  display: flex;
  /* important */
  align-items: stretch;
  justify-content: space-around;
}

.child {
  width: 100%;
  background: white;
  color: grey;
  margin: 0 .5em;
  padding: .5em;
  /* important */
  min-height: 100%;
}

<div class="container">
  
  <div class="child"><p>This is some text to fill the paragraph</p></div>
  <div class="child"><p>This is a lot of text to show you that the other div will stretch to the same height as this one even though they do not have the same amount of text inside them. If you remove text from this div, it will shrink and so will the other div.</p></div>
  
</div>

Answer 12

আপনি যদি divকোনও একজনকেই মাস্টার হতে এবং উভয়ের জন্য উচ্চতা নির্ধারণ করতে আপত্তি করেন না div:

বেহালা

যাই হোক না কেন, divডানদিকের দিকটি প্রসারিত বা স্কোয়াশ এবং ওভারফ্লো প্রস্থের উচ্চতার সাথে মেলেdiv বাম দিকের ।

উভয় div অবশ্যই একটি ধারকটির তাত্ক্ষণিক শিশু হতে হবে এবং এর মধ্যে প্রস্থটি নির্দিষ্ট করতে হবে।

প্রাসঙ্গিক সিএসএস:

.container {
    background-color: gray;
    display: table;
    width: 70%;
    position:relative;
}

.container .left{
    background-color: tomato;
    width: 35%;
}

.container .right{
    position:absolute;
    top:0px;
    left:35%;
    background-color: orange;
    width: 65%;
    height:100%;
    overflow-y: auto;
}

Answer 13

আমি এটি অর্জনের জন্য ছদ্ম উপাদান ব্যবহার করতে চাই। আপনি এটি সামগ্রীর পটভূমি হিসাবে ব্যবহার করতে পারেন এবং তাদের স্থান পূরণ করতে দিন।

এই পদ্ধতির সাহায্যে আপনি কলাম, সীমানা ইত্যাদির মধ্যে মার্জিন সেট করতে পারেন

.wrapper{
  position: relative;
  width: 200px;
}
.wrapper:before,
.wrapper:after{
  content: "";
  display: block;
  height: 100%;
  width: 40%;
  border: 2px solid blue;
  position: absolute;
  top: 0;
}
.wrapper:before{
  left: 0;
  background-color: red;
}
.wrapper:after{
  right: 0;
  background-color: green;
}

.div1, .div2{
  width: 40%;
  display: inline-block;
  position: relative;
  z-index: 1;
}
.div1{
  margin-right: 20%;
}

<div class="wrapper">
  <div class="div1">Content Content Content Content Content Content Content Content Content
  </div><div class="div2">Other</div>
</div>

Answer 14

দ্য ফিডাল

এইচটিএমএল

<div class="container">

    <div class="left-column">

    </div>

    <div class="right-column">
        <h1>Hello Kitty!</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium cum accusamus ab nostrum sit laborum eligendi, totam nam aperiam harum officia commodi tempora dolorum. Incidunt earum explicabo deleniti architecto illo!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium cum accusamus ab nostrum sit laborum eligendi, totam nam aperiam harum officia commodi tempora dolorum. Incidunt earum explicabo deleniti architecto illo!</p>
    </div>

</div>

সিএসএস

.container {
    float: left;
    width: 100%;
    background-color: black;
    position: relative;
    left: 0;
}

.container:before,
.container:after {
    content: " ";
    display: table;
}

.container:after {
    clear: both;
}

.left-column {
    float: left;
    width: 30%;
    height: 100%;
    position: absolute;
    background: wheat;
}

.right-column {
    float: right;
    width: 70%;
    position: relative;
    padding: 0;
    margin: 0;
    background: rebeccapurple;            
}

Answer 15

আমি উপরে উল্লিখিত প্রায় সমস্ত পদ্ধতি ব্যবহার করে দেখেছি, তবে ফ্লেক্সবক্স সমাধান সাফারিটির সাথে সঠিকভাবে কাজ করবে না এবং গ্রিড লেআউট পদ্ধতিগুলি IE এর পুরানো সংস্করণগুলির সাথে সঠিকভাবে কাজ করবে না।

এই সমাধানটি সমস্ত পর্দার সাথে খাপ খায় এবং এটি ক্রস ব্রাউজারের সাথে সামঞ্জস্যপূর্ণ:

.container {margin:15px auto;}
.container ul {margin:0 10px;}
.container li {width:30%; display: table-cell; background-color:#f6f7f7;box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);}

@media (max-width: 767px){
    .container li { display: inline-block; width:100%; min-height:auto!important;}
}

উপরের পদ্ধতিটি কোষের উচ্চতার সমান হবে এবং মোবাইল বা ট্যাবলেটের মতো ছোট পর্দার জন্য আমরা @mediaউপরে বর্ণিত পদ্ধতিটি ব্যবহার করতে পারি ।

Answer 16

এটি সহজেই অর্জন করতে আপনি jQuery ব্যবহার করতে পারেন।

সিএসএস

.left, .right {border:1px solid #cccccc;}

jQuery এর

$(document).ready(function() {
    var leftHeight = $('.left').height();
    $('.right').css({'height':leftHeight});
});

এইচটিএমএল

   <div class="left">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada, lacus eu dapibus tempus, ante odio aliquet risus, ac ornare orci velit in sapien. Duis suscipit sapien vel nunc scelerisque in pretium velit mattis. Cras vitae odio sed eros mollis malesuada et eu nunc.</p>
   </div>
   <div class="right">
    <p>Lorem ipsum dolor sit amet.</p>
   </div>

আপনাকে jQuery অন্তর্ভুক্ত করতে হবে

Comments

উভয়টির <div>গতিশীল সামগ্রী থাকলে এটি কাজ করবে না । আমি বলার কারণটি হ'ল যদি <div class="right">আরও সমস্যা হয় তবে অন্যান্য সমস্যা দেখা দেয় ar

— সূর্য

Answer 17

আমি জানি এটি অনেক দিন হয়ে গেছে তবে আমি যাই হোক না কেন আমার সমাধান ভাগ করে নিই। এটি একটি jQuery কৌশল।

--- এইচটিএমএল

<div class="custom-column">
    <div class="column-left">
        asd
        asd<br/>
        asd<br/>
    </div>
    <div class="column-right">
        asd
    </div>
</div>

<div class="custom-column">
    <div class="column-left">
        asd
    </div>
    <div class="column-right">
        asd
        asd<br/>
        asd<br/>
    </div>
</div>

---- সিএসএস

<style>
.custom-column { margin-bottom:10px; }
.custom-column:after { clear:both; content:""; display:block; width:100%; }
    .column-left { float:left; width:25%; background:#CCC; }
    .column-right { float:right; width:75%; background:#EEE; }
</style>

--- জ্যাকুয়ারি

<script src="js/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $balancer = function() {
        $('.custom-column').each(function(){
            if($('.column-left',this).height()>$('.column-right',this).height()){
                $('.column-right',this).height($('.column-left',this).height())
            } else {
                $('.column-left',this).height($('.column-right',this).height())
            }

        });

    }
    $balancer();
    $(window).load($balancer());
    $(window).resize($balancer());

});
</script>

Answer 18

এটি একটি jQuery প্লাগইন যা একই সারিতে থাকা সমস্ত উপাদানগুলির জন্য সমান উচ্চতা নির্ধারণ করে (উপাদানটির অফসেট.টপ পরীক্ষা করে)। সুতরাং যদি আপনার jQuery অ্যারেতে একাধিক সারি (বিভিন্ন অফসেট.টপ) থেকে উপাদান থাকে, তবে প্রতিটি সারিটির পৃথক উচ্চতা থাকবে, সেই সারিটির সর্বাধিক উচ্চতা সহ উপাদানের উপর ভিত্তি করে।

jQuery.fn.setEqualHeight = function(){

var $elements = [], max_height = [];

jQuery(this).css( 'min-height', 0 );

// GROUP ELEMENTS WHICH ARE ON THE SAME ROW
this.each(function(index, el){ 

    var offset_top = jQuery(el).offset().top;
    var el_height = jQuery(el).css('height');

    if( typeof $elements[offset_top] == "undefined" ){
        $elements[offset_top] = jQuery();
        max_height[offset_top] = 0;
    }

    $elements[offset_top] = $elements[offset_top].add( jQuery(el) );

    if( parseInt(el_height) > parseInt(max_height[offset_top]) )
        max_height[offset_top] = el_height;

});

// CHANGE ELEMENTS HEIGHT
for( var offset_top in $elements ){

    if( jQuery($elements[offset_top]).length > 1 )
        jQuery($elements[offset_top]).css( 'min-height', max_height[offset_top] );

}

};

Answer 19

    var numexcute = 0;
    var interval;
    $(document).bind('click', function () {

        interval = setInterval(function () {
            if (numexcute >= 20) {
                clearInterval(interval);
                numexcute = 0;
            }
            $('#leftpane').css('height', 'auto');
            $('#rightpane').css('height', 'auto');
            if ($('#leftpane').height() < $('#rightpane').height())
                $('#leftpane').height($('#rightpane').height());
            if ($('#leftpane').height() > $('#rightpane').height())

                $('#rightpane').height($('#leftpane').height());
            numexcute++;
        }, 10);

    });

Comments

আপনার উত্তরের জন্য কোনও মন্তব্য সরবরাহ করুন।

— sgnsajgon

Answer 20

আমার একই সমস্যা ছিল তাই আমি jquery ব্যবহার করে এই ছোট ফাংশনটি তৈরি করেছিলাম কারণ আজকাল জেকুয়ারি প্রতিটি ওয়েব অ্যাপ্লিকেশনের অংশ।

function fEqualizeHeight(sSelector) {
    var sObjects = $(sSelector);

    var iCount = sObjects.length;

    var iHeights = [];

    if (iCount > 0) {
        $(sObjects).each(function () {
            var sHeight = $(this).css('height');
            var iHeight = parseInt(sHeight.replace(/px/i,''));
            iHeights.push(iHeight);
        });

        iHeights.sort(function (a, b) {
            return a - b
        });

        var iMaxHeight = iHeights.pop();

        $(sSelector).each(function () {
            $(this).css({
                'height': iMaxHeight + 'px'
            });
        });
    }
}

আপনি পৃষ্ঠার প্রস্তুত ইভেন্টে এই ফাংশনটি কল করতে পারেন

$(document).ready(function(){
   fEqualizeHeight('.columns');
});

আমি আশা করি এটি আপনার পক্ষে কাজ করে।

Answer 21

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

.mydivclass {inline-block; vertical-align: middle; width: 33%;}

Answer 22

<div>

<div style="border:1px solid #cccccc; float:left; min-height:200px;">

Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>

</div>

<div style="border:1px solid #cccccc; float:left; min-height:200px;">

Some content!

</div>

</div>

আমি এখানে যা করেছি তা হ'ল উচ্চতাটি নূন্যতম-উচ্চতায় পরিবর্তন করা এবং এটি একটি নির্দিষ্ট মান দেওয়া। যদি তাদের একটির আকার পরিবর্তন করা হয় তবে অন্যটি একই উচ্চতায় থাকবে। আপনি যা চান এটি নিশ্চিত কিনা তা নিশ্চিত নয়

Comments

ওপি চাইছিল ডিভগুলি সর্বদা একই উচ্চতা থাকে।

— সাইমন ফোর্সবার্গ