हम कहाँ से शुरू कर रहे हैं
यहाँ कुछ बॉयलरप्लेट HTML और CSS है। हमारे उदाहरण में, हमारे पास दो अस्थायी बाल तत्वों के साथ एक मूल तत्व है।
/* 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: अतिप्रवाह: ऑटो
एक समाधान जो सभी आधुनिक ब्राउज़रों में और इंटरनेट एक्सप्लोरर में IE8 में वापस काम करता overflow: autoहै, मूल तत्व को जोड़ना है। यह IE7 में भी काम करता है, स्क्रॉलबार्स के साथ।
/* 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: फ्लोट पैरेंट कंटेनर
एक अन्य समाधान जो सभी आधुनिक ब्राउज़रों में काम करता है और IE7 में वापस मूल कंटेनर को फ्लोट करना है।
यह हमेशा व्यावहारिक नहीं हो सकता है, क्योंकि आपके पैरेंट डिव को फ्लोट करने से आपके पेज लेआउट के अन्य हिस्से प्रभावित हो सकते हैं।
/* 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: फ़्लोटिंग तत्वों के नीचे समाशोधन div जोड़ें
/*
* 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: मूल तत्व में समाशोधन div जोड़ें
यह समाधान पुराने ब्राउज़रों और नए ब्राउज़रों के लिए समान रूप से बुलेटप्रूफ है।
/*
* 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-elements/