সিএসএস - ফ্লোট চাইল্ড ডিআইভি উচ্চতা পিতামাতার উচ্চতায় প্রসারিত করুন

Question

আমার পৃষ্ঠার কাঠামোটি এতে রয়েছে:

<div class="parent">
    <div class="child-left floatLeft">
    </div>

    <div class="child-right floatLeft">
    </div>
</div>

এখন, child-leftডিআইভিতে আরও সামগ্রী থাকবে, তাই theparent ডিআইভি'র উচ্চতা শিশু ডিআইভির অনুযায়ী বৃদ্ধি পায়।

তবে সমস্যাটি হ'ল child-rightউচ্চতা বাড়ছে না। আমি কীভাবে এর উচ্চতাটিকে তার পিতামাতার সমান করতে পারি?

Comments

সহজ। সহজ। ফ্লেক্সবক্স সহ সমান উচ্চতা কলাম ।

— মাইকেল বেঞ্জামিন

Answer 1

জন্য parentউপাদান, নিম্নলিখিত বৈশিষ্ট্য যোগ করুন:

.parent {
    overflow: hidden;
    position: relative;
    width: 100%;
}

তারপরে .child-right:

.child-right {
    background:green;
    height: 100%;
    width: 50%;
    position: absolute;
    right: 0;
    top: 0;
}

সিএসএস উদাহরণ সহ আরও বিশদ ফলাফল এবং সমান উচ্চতা কলামগুলি সম্পর্কে এখানে আরও তথ্যের সন্ধান করুন ।

Comments

আপনার সিএসএসের ফলাফল অনির্ধারিত আচরণে আসে - পিতামাতার উচ্চতা বাচ্চাদের উচ্চতার উপর নির্ভর করে, তবে বাচ্চাদের পিতামাতার শর্তাদির মধ্যে একটি শতাংশ উচ্চতা নির্ধারণ করা হয়: এটি অবৈধ, এবং সম্ভবত ক্রস ব্রাউজারের মতো কাজ করবে না।

— ইমন নেরবোন

আমি দেখছি আপনি সবকিছু ভাসাচ্ছেন না - তাই ডান কলামটি বামের চেয়ে দীর্ঘায়িত হলে এটি স্কেলিং না করার মূল্যে সংজ্ঞায়িত করা হয়েছে (যা আসলে ওপি-র প্রশ্নের ক্ষেত্রে নয়)।

— ইমন নেরবোন

হ্যাঁ, আপনি এটি যুক্ত করতে হবে: প্যাডিং-নীচে: 32768px; মার্জিন-নীচে: -32768px; বাচ্চাদের কাছে

— মাইকেল

এটি ডান কলামটিতে যতক্ষণ না কম বামে বা অন্যথায় এটি ক্লিপড থাকবে তার কম গ্যারান্টিযুক্ত ততক্ষণ কাজ করে। অকেজো ঘোষণাকে বাদ দিতে আমি উত্তর সম্পাদনা করেছি।

— ক্রিস্টোফ

@ ম্যাথিউ ব্ল্যাকফোর্ড: এটি একটি "হ্যাক" যাতে এটি মার্জিন ভেঙে যাওয়া রোধ করে। আপনি অন্য উপায়ে মার্জিন ভেঙে যাওয়া রোধ করতে পারেন, যেমন 1px স্বচ্ছ সীমানা ব্যবহার করে, তবে সংক্ষেপে, তবে এখানে গুরুত্বপূর্ণ বিষয়টি হল আপনি মার্জিন ধসের বিষয়টি এড়াতে পারেন। আমি এই সমাধানটি একটি শেষ অবলম্বন ব্যতীত ব্যবহার করব না কারণ এটি যখন আপনার অনুমানগুলি ত্রুটিযুক্ত হয়ে দাঁড়ায় তখন অদ্ভুত বিন্যাসের ত্রুটি এবং অপ্রত্যাশিত ক্রপিং (বা সুপারিম্পোজড সামগ্রী) তৈরি করে। সংক্ষেপে: আপনি সত্যিই প্রয়োজন না হলে আপনি এটি করতে চান না ।

— ইমন নেরবোন

Answer 2

এই সমস্যার একটি সাধারণ সমাধান নিখরচায় অবস্থান বা ক্রপযুক্ত ফ্লোট ব্যবহার করে তবে এগুলি মুশকিল যে আপনার কলামগুলি সংখ্যা + আকারে পরিবর্তিত হয় এবং আপনার "মূল" কলামটি সর্বদা দীর্ঘতম হয় তা নিশ্চিত করার প্রয়োজন। পরিবর্তে, আমি আপনাকে আরও তিনটি দৃust় সমাধান ব্যবহার করার পরামর্শ দিচ্ছি:

1. display: flex: এখন পর্যন্ত সহজতম এবং সর্বোত্তম সমাধান এবং খুব নমনীয় - তবে আইই 9 এবং তার চেয়ে বেশি বয়স্কদের দ্বারা অসমর্থিত।
2. tableবা display: table: খুব সাধারণ, খুব সামঞ্জস্যপূর্ণ (প্রতিটি ব্রাউজারে প্রায়), বেশ নমনীয়।
3. display: inline-block; width:50% নেতিবাচক মার্জিন হ্যাক সহ: বেশ সহজ, কিন্তু কলাম-নীচের সীমানাগুলি কিছুটা জটিল।

1। display:flex

এটি সত্যই সহজ এবং আরও জটিল বা আরও বিস্তারিত লেআউটগুলির সাথে খাপ খাইয়ে নেওয়া সহজ - তবে ফ্লেক্সবক্সটি কেবল আইই 10 বা তারপরে সমর্থিত (অন্যান্য আধুনিক ব্রাউজারগুলি ছাড়াও)।

উদাহরণ: http://output.jsbin.com/hetunujuma/1

প্রাসঙ্গিক এইচটিএমএল:

<div class="parent"><div>column 1</div><div>column 2</div></div>

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

.parent { display: -ms-flex; display: -webkit-flex; display: flex; }
.parent>div { flex:1; }

ফ্লেক্সবক্সের আরও অনেক বিকল্পের জন্য সমর্থন রয়েছে, তবে কেবলমাত্র উপরের পর্যায়ে থাকা যে কোনও কলামের সংখ্যা রয়েছে!

2. <table>বাdisplay: table

এটি করার একটি সহজ এবং অত্যন্ত সামঞ্জস্যপূর্ণ উপায় হ'ল table- আমি আপনাকে পুরানো-আইই সমর্থন প্রয়োজন হলে প্রথমে চেষ্টা করে নেওয়ার পরামর্শ দিই । আপনি কলামগুলি নিয়ে কাজ করছেন; ডিভস + ফ্লোটগুলি কেবল এটি করার সর্বোত্তম উপায় নয় (কেবলমাত্র সারণী ব্যবহার না করে কেবলমাত্র সিমেন্ট সীমাবদ্ধতার আশপাশে হ্যাক করার জন্য নেস্টেড ডিভের একাধিক স্তরের কথা উল্লেখ না করা)। আপনি যদি tableউপাদানটি ব্যবহার করতে না চান তবে সিএসএস বিবেচনা করুনdisplay: table (আইআই 7 এবং তার চেয়ে বেশি বয়স্ক দ্বারা অসমর্থিত)।

উদাহরণ: http://jsfiddle.net/emn13/7FFp3/

প্রাসঙ্গিক এইচটিএমএল: (তবে<table>পরিবর্তেএকটি প্লেইন ব্যবহার বিবেচনাকরুন)

<div class="parent"><div>column 1</div><div>column 2</div></div>

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

.parent { display: table; }
.parent > div {display: table-cell; width:50%; }
/*omit width:50% for auto-scaled column widths*/

এই পদ্ধতিটি overflow:hiddenফ্লোটের সাথে ব্যবহারের চেয়ে অনেক বেশি দৃ ust়। আপনি বেশ কয়েকটি সংখ্যক কলাম যুক্ত করতে পারেন; আপনি চাইলে এগুলি স্বয়ংক্রিয়ভাবে করতে পারেন; এবং আপনি প্রাচীন ব্রাউজারগুলির সাথে সামঞ্জস্যতা বজায় রাখুন। ভাসমান সমাধানের বিপরীতে, কোন কলামটি সবচেয়ে দীর্ঘ তা আপনার আগেও জানতে হবে না ; উচ্চতা স্কেল ঠিক আছে।

KISS: আপনার বিশেষভাবে প্রয়োজন না হলে ফ্লোট হ্যাক ব্যবহার করবেন না। আইই 7 যদি কোনও সমস্যা হয় তবে আমি কোনও দিন কঠোর রক্ষণাবেক্ষণ, কম নমনীয় ট্রিক-সিএসএস সমাধানের মাধ্যমে অর্থপূর্ণ কলামগুলির সাথে একটি সাদামাটা টেবিলটি বেছে নেব।

যাইহোক, আপনার প্রতিক্রিয়াশীল হওয়ার জন্য যদি আপনার বিন্যাসের প্রয়োজন হয় (উদাহরণস্বরূপ ছোট মোবাইল ফোনে কোনও কলাম নেই) আপনি @mediaছোট পর্দার প্রস্থগুলির জন্য সাদামাটা ব্লক বিন্যাসে ফিরে পড়ার জন্য একটি কোয়েরি ব্যবহার করতে পারেন - এটি আপনি ব্যবহার করেন <table>বা অন্য কোনও ক্ষেত্রে এটি কাজ করেdisplay: table উপাদান ।

3. display:inline blockএকটি নেতিবাচক মার্জিন হ্যাক সঙ্গে।

আরেকটি বিকল্প ব্যবহার করা হয় display:inline block।

উদাহরণ: http://jsbin.com/ovuqes/2/edit

প্রাসঙ্গিক এইচটিএমএল: (divট্যাগগুলিরমধ্যে ফাঁকের অভাবেতাৎপর্যপূর্ণ!)

<div class="parent"><div><div>column 1</div></div><div><div>column 2</div></div></div>

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

.parent { 
    position: relative; width: 100%; white-space: nowrap; overflow: hidden; 
}

.parent>div { 
    display:inline-block; width:50%; white-space:normal; vertical-align:top; 
}

.parent>div>div {
    padding-bottom: 32768px; margin-bottom: -32768px; 
}

এটি সামান্য জটিল, এবং নেতিবাচক মার্জিনের অর্থ কলামগুলির "সত্য" নীচের অংশটি অস্পষ্ট। এর পরিবর্তে এর অর্থ আপনি সেই কলামগুলির নীচের অংশের তুলনায় কোনও কিছু রাখতে পারবেন না কারণ এটি কেটে গেছে overflow: hidden। নোট করুন যে ইনলাইন-ব্লকগুলি ছাড়াও, আপনি ভাসমানগুলির সাথে একই রকম প্রভাব অর্জন করতে পারেন।

---

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

Comments

ভাল, তবে এটি লক্ষণীয় যে আপনি এই ঘরগুলির মধ্যে মার্জিনগুলি ব্যবহার করতে পারছেন না (এবং প্যাডিংগুলি আপনি স্টাইলযুক্ত চাইলে সাহায্য করবে না)।

— ওয়ার্ডপ্রেসার

border-spacing:10px;টেবিলের উপাদানটিতে মার্জিনের মতো ব্যবধান প্রবর্তন করা হবে। বিকল্পভাবে, আপনি অতিরিক্ত স্থান (ফাঁকা) কলাম যুক্ত করতে পারেন যেখানে আপনি অতিরিক্ত স্থান চান। এবং আপনি টেবিল-কোষের ভিতরে প্যাডিং যোগ করতে পারেন; যে প্যাডিংটি ব্যাকগ্রাউন্ডে অন্তর্ভুক্ত করা হবে, যাতে আপনি যা চান তা নাও হতে পারে। তবে আপনি ঠিক বলেছেন যে এটি সাধারণ মার্জিনের মতো যথেষ্ট নমনীয় নয়। এবং আপনি কলামগুলির সাথে সম্পর্কিত কিছু রাখতে পারবেন না, যা কোনও সমস্যা হতে পারে।

— ইমন নের্বোন

সুতরাং এটি একটি টেবিল-কম লেআউট ভাল বা না?

— গতিশীল

আমাকে বলতে হবে: আমি আপনাকে সম্মত করি যে এই ক্ষেত্রে একটি সাধারণ টেবিল পর্যাপ্ত পরিমাণের চেয়ে বেশি। সমস্যাটি হ'ল টেবিলের সাথে প্রতিটি বিন্যাস উপেক্ষা করার জন্য একটি সাধারণ দৃষ্টিভঙ্গি রয়েছে

— গতিশীল

টেবিলের সমস্যাটি হ'ল স্ক্রিনটি যখন একটি ছোট প্রস্থে (প্রতিক্রিয়াশীল নকশা) আকারে পরিবর্তন করা হয় তখন পরবর্তী একের উপরের অংশে একটি টাইলিংয়ের পরিবর্তে টেবিলের ঘরগুলি স্কুইশ হয়ে যায়। প্যাডিং-নীচে সহ দ্বিতীয় পদ্ধতি: 32768px; মার্জিন-নীচে: -32768px; বেশ আশ্চর্যজনক এবং আমার যা প্রয়োজন ঠিক

— তেমনটিই ঘটায়

Answer 3

পিতামাতার জন্য:

display: flex;

শিশুদের জন্য:

align-items: stretch;

আপনার কিছু উপসর্গ যুক্ত করা উচিত, ক্যানিয়াস পরীক্ষা করুন।

Comments

সুপারিশ করবে না। আইই 9 এখনও একটি জিনিস।

আপনার উত্তর করার জন্য আপনাকে ধন্যবাদ; এটি ভালই কাজ করে! "আপনার কিছু উপসর্গ যুক্ত করা উচিত, ক্যানিয়াস পরীক্ষা করুন" " আপনি কি এই রেখাটি বলতে চাইছেন? আপনি কি নতুনদের জন্য আরও কিছু তথ্য যুক্ত করতে পারেন?

— মোঃ সিফাতুল ইসলাম

@ এমডিসিফাতুলআইসলাম এখানে যান: caniuse.com/#feat=flexbox আপনি দেখতে পারেন যে আপনার কিছু ব্রাউজারের বৈশিষ্ট্য উপসর্গের প্রয়োজন হয় কিনা।

— আইফি

Answer 4

আমি অনেক উত্তর পেয়েছি, তবে সম্ভবত আমার পক্ষে সবচেয়ে ভাল সমাধান

.parent { 
  overflow: hidden; 
}
.parent .floatLeft {
  # your other styles
  float: left;
  margin-bottom: -99999px;
  padding-bottom: 99999px;
}

আপনি এখানে অন্যান্য সমাধানগুলি চেক করতে পারেন http://css-tricks.com/fluid-width-equal-height-colالm/

Comments

এই কাজটি কেন আমার কোনও ধারণা নেই তবে এটি আমার সমস্যাটিকে মনোহরণের মতো সমাধান করে like আপনাকে ধন্যবাদ

— একত্রিত করুন

আমার জন্য কাজ করে। যদিও এটি পরিষ্কার উপায় নয়। ধন্যবাদ!

— মার্ক অ্যান্টনি উয়ে

নরক হিসাবে হ্যাকি। আমি একটি উত্পাদন অ্যাপ্লিকেশন জন্য এটি সুপারিশ না

— ফেডারিকো

এই আশ্চর্যজনক haha। আমি ভাবিনি যে এটি আসলে কাজ করবে

— টম ম্যাকডোনফ

Answer 5

দয়া করে পিতামাতাকে ডিভ সেট করুন overflow: hidden
তারপর চাইল্ড ডিভসে আপনি প্যাডিং-নীচের জন্য একটি বিশাল পরিমাণ সেট করতে পারেন। উদাহরণস্বরূপ
padding-bottom: 5000px
তারপরে margin-bottom: -5000px
এবং তারপরে সমস্ত শিশু ডিভ্স পিতামাতার উচ্চতা হবে।
অবশ্যই আপনি যদি পিতামাতার ডিভিতে লিখিত বিষয়বস্তু রাখার চেষ্টা করছেন তবে এটি কাজ করবে না (এটি অন্যান্য ডিভের বাইরে)

.parent{
    border: 1px solid black;
    overflow: hidden;
    height: auto;
}
.child{
    float: left;
    padding-bottom: 1500px;
    margin-bottom: -1500px;
}
.child1{
    background: red;
    padding-right: 10px;    
}
.child2{
    background: green;
    padding-left: 10px;
}

<div class="parent">
    <div class="child1 child">
        One line text in child1
    </div>
    <div class="child2 child">
        Three line text in child2<br />
        Three line text in child2<br />
        Three line text in child2
    </div>
</div>

উদাহরণ: http://jsfiddle.net/Tareqdhk/DAFEC/

Comments

কিছুটা নোংরা বলে মনে হচ্ছে তবে আমার পক্ষে কাজ করেছে - এই প্রশ্নের একমাত্র সমাধান। আমি এটি টুইটার বুটস্ট্র্যাপ ব্যবহার করে চেষ্টা করেছি।

— চুচাবেকা

Answer 6

পিতামাতার একটি উচ্চতা আছে? আপনি যদি পিতামাতাদের মতো উচ্চতা নির্ধারণ করেন।

div.parent { height: 300px };

তারপরে আপনি শিশুটিকে পুরো উচ্চতায় প্রসারিত করতে পারেন।

div.child-right { height: 100% };

সম্পাদনা

আপনি জাভাস্ক্রিপ্ট ব্যবহার করে এটি কীভাবে করবেন তা এখানে।

Comments

পিতামাতার একটি নির্দিষ্ট উচ্চতা নেই। এটি শিশু-বাম উচ্চতা অনুযায়ী প্রসারিত হচ্ছে।

— বীরা

আহ, আমি ততটুকু ভেবেছিলাম, তারপরে আপনার কিছু জাভাস্ক্রিপ্ট দরকার হবে, আমি এটি একটি সেকেন্ডের মধ্যে যুক্ত করব।

— অলিকাল

@ অলিকাল জেএসফিডাল লিঙ্কটি নষ্ট হয়ে গেছে। হয় এটি সরান বা উত্তর আপডেট করুন। ধন্যবাদ!

— #mysterybox

জেএসের লিঙ্কটি এখন একটি 404 দেয়

— চ্যানোচ

Answer 7

সিএসএস টেবিল প্রদর্শন এর জন্য আদর্শ:

.parent {
  display: table;
  width: 100%;
}
.parent > div {
  display: table-cell;
}
.child-left {
  background: powderblue;
}
.child-right {
  background: papayawhip;
}

<div class="parent">
  <div class="child-left">Short</div>
  <div class="child-right">Tall<br>Tall</div>
</div>

আসল উত্তর (অনুমান করা যে কোনও কলাম লম্বা হতে পারে):

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

Comments

ভাল যুক্তি. বাচ্চাদের উচ্চতা সবচেয়ে দীর্ঘতম ভাইবোনের (এমনকি এটি পিতামাতার উচ্চতার দ্বারা নির্ধারিত হয় কিনা) এবং পিতামাতার নয় কি করে? আমার ধারণা যে সিএসএসে করা যায় না।

— মিকাতো

না, ভাইবোনরা একে অপরের উচ্চতা প্রভাবিত করতে পারে না। তবে, display: table+ display: table-cellলেআউটটি পছন্দসই ফলাফল উত্পন্ন করবে।

— সালমান এ

দুর্দান্ত আপডেট! যাইহোক, আমি এটি চেষ্টা করে শেষ করেছিলাম এবং আমি ডিভ / কোষের মধ্যে সাদা স্থান পৃথকীকরণ করতে চেয়েছিলাম এবং এটি সম্পাদন করার জন্য টেবিল-সেল ডিভের মধ্যে অভ্যন্তরীণ ডিভগুলি তৈরি করতে পেরেছিলাম এবং অবশ্যই তাদের সম্পূর্ণ উচ্চতা ব্যবহার করার ক্ষমতা হারিয়ে ফেলেছিলাম কারণ অভ্যন্তরীণ ডিভগুলি টেবিল-সেল ডিভগুলি ছিল না - ঠিক একই সমস্যা। এর জন্য কোন ধারণা? কোথাও কোথাও ব্যবধান হারিয়ে নেই।

— মিকাতো

আহা, সিএসএসে সীমানা-ব্যবধান রয়েছে! stackoverflow.com/questions/339923/… আমি আমার টেবিলের মতো ডিভগুলি সীমা-ফাঁক ব্যবধান ব্যবহার করে হোয়াইটস্পেস বিচ্ছিন্নতার সাথে ভালভাবে কাজ করতে সক্ষম হয়েছি। আমার এখন টেবিল সেলগুলি তৈরি করার ক্ষমতা রয়েছে (রঙিন পটভূমি ব্লক) পিতামাতার পুরো উচ্চতা ব্যবহার করুন বা টেবিল-কোষ ডিভসের চতুর ব্যবহারের মাধ্যমে নয়।

— মিকাতো

আমি যে দৌড়ে এসেছি তার মধ্যে একটি গোচা: আপনি এটি ব্যবহার করতে পারবেন না float: stackoverflow.com/questions/20110217/…

— জোশুয়া পিন্টার

Answer 8

আমি সম্প্রতি আমার ওয়েবসাইটে jQuery ব্যবহার করে এটি করেছি। কোডটি দীর্ঘতম ডিভের উচ্চতা গণনা করে এবং অন্যান্য ডিভকে একই উচ্চতায় সেট করে। কৌশলটি এখানে:

http://www.broken-links.com/2009/01/20/very-quick-equal-height-columns-in-jquery/

আমি বিশ্বাস করি না height:100%কাজ করবে, সুতরাং যদি আপনি স্পষ্টভাবে ডিভ হাইটগুলি না জানেন তবে আমি মনে করি না খাঁটি সিএসএস সমাধান আছে।

Comments

আপনার এটি কমপক্ষে প্রস্তুত, আকার পরিবর্তন, ওরিয়েন্টেশন পরিবর্তন, ফন্টের আকারে ট্রিগার করা উচিত।

— নেটঅ্যাকশন

Answer 9

আমি এটি একটি মন্তব্য বিভাগের জন্য ব্যবহার করেছি:

.parent {
    display: flex;
    float: left;
    border-top:2px solid black;
    width:635px;
    margin:10px 0px 0px 0px;
    padding:0px 20px 0px 20px;
    background-color: rgba(255,255,255,0.5);
}
    
.child-left {
	align-items: stretch;
	float: left;
	width:135px;
	padding:10px 10px 10px 0px;
	height:inherit;
	border-right:2px solid black;
}

.child-right {
	align-items: stretch;
	float: left;
	width:468px;
	padding:10px;
}

<div class="parent">
  <div class="child-left">Short</div>
  <div class="child-right">Tall<br>Tall</div>
</div>

আপনি চাইল্ড-ডান থেকে ডানদিকে ভাসতে পারেন, তবে এই ক্ষেত্রে আমি প্রতিটি ডিভের প্রস্থকে যথাযথভাবে গণনা করেছি।

Comments

আমার মনে যে প্রথম জিনিসটি এসেছিল তা ছিল উচ্চতা: নিশ্চিত হন না যে কেন কেউ উপকৃত হয়নি

— আন্দ্রেস

Answer 10

আপনি যদি বুটস্ট্র্যাপ সম্পর্কে সচেতন হন তবে আপনি এটি 'ফ্লেক্স' সম্পত্তি ব্যবহার করে সহজেই করতে পারেন ll আপনাকে যা করতে হবে তা হল সিএসএসের বৈশিষ্ট্যগুলির নীচে পিতামহ বিভাজনের কাছে যেতে হবে

.homepageSection {
  overflow: hidden;
  height: auto;
  display: flex;
  flex-flow: row;
}

.homepageSectionআমার পিতামহ ডিভ কোথায় ? এখন আপনার এইচটিএমএলে চাইল্ড ডিভ যুক্ত করুন

<div class="abc col-md-6">
<div class="abc col-md-6">

যেখানে আব্বু আমার শিশু ডিভ। আপনি কেবলমাত্র শিশু ডিভকে সীমানা দিয়েই উভয় সন্তানের ডিভের উচ্চতার সমতা পরীক্ষা করতে পারেন

Answer 11

<div class="parent" style="height:500px;">
<div class="child-left floatLeft" style="height:100%">
</div>

<div class="child-right floatLeft" style="height:100%">
</div>
</div>

আমি ধারণা দেওয়ার জন্য ইনলাইন স্টাইল ব্যবহার করেছি।

Answer 12

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

<div class="parent">
    <div class="assert-height invisible">
        <!-- content -->
    </div>
    <div class="shown">
        <!-- content -->
    </div>
</div>