เราจะเริ่มจากที่ใด
นี่คือตัวอย่างแผ่น 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: ล้น: อัตโนมัติ
วิธีแก้ปัญหาที่ใช้งานได้ในเบราว์เซอร์ที่ทันสมัยและใน Internet Explorer กลับไปที่ 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 คือการลอยคอนเทนเนอร์หลัก
สิ่งนี้อาจใช้ไม่ได้เสมอไปเพราะการลอยตัว div parent ของคุณอาจส่งผลต่อส่วนอื่น ๆ ของเค้าโครงหน้ากระดาษของคุณ
/* 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 Clearing ด้านล่างองค์ประกอบที่ลอย
/*
* 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 สำนักหักบัญชีกับองค์ประกอบหลัก
โซลูชันนี้จะค่อนข้าง bulletproof สำหรับเบราว์เซอร์รุ่นเก่าและเบราว์เซอร์รุ่นใหม่เหมือนกัน
/*
* 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/