আমরা যেখান থেকে শুরু করছি
এখানে কিছু বয়লারপ্লেট এইচটিএমএল এবং সিএসএস রয়েছে। আমাদের উদাহরণে, দুটি ভাসমান শিশু উপাদান সহ আমাদের পিতামাতাদের উপাদান রয়েছে।
/* The CSS you're starting with may look similar to this.
* This doesn't solve our problem yet, but we'll get there shortly.
*/
.containing-div {
background-color: #d2b48c;
display: block;
height: auto;
}
.floating-div {
float: left;
width: 50%;
}
.floating-div ul {
display: inline-block;
height: auto;
}
<!-- The HTML you're starting with might look similar to this -->
<div class="containing-div">
<div class="floating-div">
<ul>
<li>List Item One</li>
<li>List Item Two</li>
<li>List Item Three</li>
<li>List Item Four</li>
</ul>
</div>
<div class="floating-div">
<ul>
<li>List Item Five</li>
<li>List Item Six</li>
<li>List Item Seven</li>
<li>List Item Eight</li>
</ul>
</div>
</div>
সমাধান # 1: ওভারফ্লো: অটো
একটি সমাধান যা সমস্ত আধুনিক ব্রাউজারগুলিতে এবং ইন্টারনেট এক্সপ্লোরারে আইই 8-তে ফিরে কাজ করে তা হ'ল overflow: autoপিতা-মাতার উপাদানটি যুক্ত করা। এটি আই 7 এও কাজ করে, স্ক্রোলবার যুক্ত করার সাথে।
/* Our Modified CSS.
* This is one way we can solve our problem.
*/
.containing-div {
background-color: #d2b48c;
display: block;
height: auto;
overflow: auto;
/*This is what we added!*/
}
.floating-div {
float: left;
width: 50%;
}
.floating-div ul {
display: inline-block;
height: auto;
}
সমাধান # 2: ফ্লোট প্যারেন্ট পাত্রে
আর একটি সমাধান যা সমস্ত আধুনিক ব্রাউজারগুলিতে কাজ করে এবং আই 7 তে ফিরে আসে তা হল পিতামাতার ধারকটি ভাসা।
এটি সর্বদা ব্যবহারিক নাও হতে পারে, কারণ আপনার পিতা-মাতার দ্বি ভাসমানটি আপনার পৃষ্ঠা বিন্যাসের অন্যান্য অংশগুলিকে প্রভাবিত করতে পারে।
/* Modified CSS #2.
* Floating parent div.
*/
.containing-div {
background-color: #d2b48c;
display: block;
float: left;
/*Added*/
height: auto;
width: 100%;
/*Added*/
}
.floating-div {
float: left;
width: 50%;
}
.floating-div ul {
display: inline-block;
height: auto;
}
পদ্ধতি # 3: ভাসমান উপাদানগুলির নীচে ক্লিয়ারিং ডিভ যুক্ত করুন
/*
* CSS to Solution #3.
*/
.containing-div {
background-color: #d2b48c;
display: block;
height: auto;
}
.floating-div {
float: left;
width: 50%;
}
.floating-div ul {
display: inline-block;
height: auto;
}
/*Added*/
.clear {
clear: both;
}
<!-- Solution 3, Add a clearing div to bottom of parent element -->
<div class="containing-div">
<div class="floating-div">
<ul>
<li>List Item One</li>
<li>List Item Two</li>
<li>List Item Three</li>
<li>List Item Four</li>
</ul>
</div>
<div class="floating-div">
<ul>
<li>List Item Five</li>
<li>List Item Six</li>
<li>List Item Seven</li>
<li>List Item Eight</li>
</ul>
</div>
<div class="clear"></div>
</div>
পদ্ধতি # 4: প্যারেন্ট এলিমেন্টে ক্লিয়ারিং ডিভ যুক্ত করুন
এই সমাধানটি পুরানো ব্রাউজারগুলি এবং নতুন ব্রাউজারগুলির জন্য একইভাবে বেশ বুলেটপ্রুফ proof
/*
* CSS to Solution #4.
*/
.containing-div {
background-color: #d2b48c;
display: block;
height: auto;
}
.floating-div {
float: left;
width: 50%;
}
.floating-div ul {
display: inline-block;
height: auto;
}
/*Added*/
.clearfix {
clear: both;
}
.clearfix:after {
clear: both;
content: "";
display: table;
}
<!-- Solution 4, make parent element self-clearing -->
<div class="containing-div clearfix">
<div class="floating-div">
<ul>
<li>List Item One</li>
<li>List Item Two</li>
<li>List Item Three</li>
<li>List Item Four</li>
</ul>
</div>
<div class="floating-div">
<ul>
<li>List Item Five</li>
<li>List Item Six</li>
<li>List Item Seven</li>
<li>List Item Eight</li>
</ul>
</div>
</div>
https://www.lockedownseo.com/parent-div-100-height-child-floated-eferences/ থেকে