ทำให้ div ภายนอกมีความสูงเท่ากับเนื้อหาลอยโดยอัตโนมัติ

ฉันต้องการด้านนอกdivซึ่งเป็นสีดำเพื่อห่อหุ้มมันให้divลอยอยู่ภายใน ฉันไม่ต้องการที่จะใช้style='height: 200pxในdivกับouterdivรหัสตามที่ผมต้องการให้เป็นโดยอัตโนมัติสูงของเนื้อหา (เช่นลอยdivs)

<div id='outerdiv' style='border: 1px solid black;background-color: black;'>
<div style='width=300px;border: red 1px dashed;float: left;'>
    <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>

<div style='width=300px;border: red 1px dashed;float: right;'>
    <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
</div>

จะบรรลุเป้าหมายนี้ได้อย่างไร?

คุณสามารถตั้งค่าouterdivCSS เป็นสิ่งนี้

#outerdiv {
    overflow: hidden; /* make sure this doesn't cause unexpected behaviour */
}

คุณสามารถทำได้โดยการเพิ่มองค์ประกอบต่อท้ายด้วยclear: both. สามารถเพิ่มได้ตามปกติโดยใช้ JS (ไม่ใช่วิธีแก้ปัญหาที่ดี) หรือด้วย:afterCSS pseudo element (ไม่รองรับอย่างกว้างขวางใน IE รุ่นเก่า)

ปัญหาคือตามธรรมชาติแล้วตู้คอนเทนเนอร์จะไม่ขยายรวมถึงลูกลอย ขอเตือนด้วยการใช้ตัวอย่างแรกหากคุณมีองค์ประกอบลูกนอกองค์ประกอบหลักองค์ประกอบเหล่านั้นจะถูกซ่อนไว้ คุณยังสามารถใช้ 'auto' เป็นค่าคุณสมบัติได้ แต่จะเรียกใช้แถบเลื่อนหากองค์ประกอบใด ๆ ปรากฏภายนอก

คุณยังสามารถลองลอยคอนเทนเนอร์หลักได้ แต่อาจเป็นไปไม่ได้ / ยากขึ้นอยู่กับการออกแบบของคุณ

ประการแรกฉันขอแนะนำให้คุณใช้สไตล์ CSS ของคุณในไฟล์ CSS ภายนอกแทนที่จะทำแบบอินไลน์ การดูแลรักษาง่ายกว่ามากและสามารถนำกลับมาใช้ใหม่ได้โดยใช้คลาส

การแก้ไขคำตอบของ Alex (& Garret's clearfix) ของ "การเพิ่มองค์ประกอบในตอนท้ายด้วย clear: both" คุณสามารถทำได้ดังนี้

    <div id='outerdiv' style='border: 1px solid black; background-color: black;'>
        <div style='width: 300px; border: red 1px dashed; float: left;'>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
        </div>

        <div style='width: 300px; border: red 1px dashed; float: right;'>
            <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
        </div>
        <div style='clear:both;'></div>
    </div>

วิธีนี้ใช้งานได้ (แต่อย่างที่คุณเห็น CSS แบบอินไลน์ไม่ค่อยสวยนัก)

คุณอาจต้องการลองใช้โฟลตแบบปิดเองได้ตามรายละเอียดในhttp://www.sitepoint.com/simple-clearing-of-floats/

ดังนั้นอาจลองอย่างใดอย่างหนึ่งoverflow: auto(โดยปกติจะใช้งานได้) หรือoverflow: hiddenตามที่ alex กล่าว

ฉันรู้ว่าบางคนจะเกลียดฉัน แต่ฉันพบว่าdisplay:table-cellสามารถช่วยได้ในกรณีนี้

มันสะอาดกว่าจริงๆ

ก่อนอื่นคุณไม่ได้ใช้width=300pxนั่นคือการตั้งค่าแอตทริบิวต์สำหรับแท็กไม่ใช่ CSS ให้ใช้width: 300px;แทน

ฉันขอแนะนำให้ใช้clearfixเทคนิคกับไฟล์#outerdiv. Clearfixเป็นวิธีแก้ปัญหาทั่วไปในการล้าง 2 div แบบลอยดังนั้น div พาเรนต์จะขยายเพื่อรองรับ div 2 ตัว

<div id='outerdiv' class='clearfix' style='width:600px; background-color: black;'>
    <div style='width:300px; float: left;'>
        <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
    </div>

    <div style='width:300px; float: left;'>
        <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
    </div>
</div>

นี่คือตัวอย่างสถานการณ์ของคุณและสิ่งที่ Clearfix ดำเนินการเพื่อแก้ไข

ใช้ jQuery:

ตั้งค่า Parent Height = Child offsetHeight

$(document).ready(function() {
    $(parent).css("height", $(child).attr("offsetHeight"));
}

ใช้ clear: both;

ฉันใช้เวลากว่าหนึ่งสัปดาห์ในการพยายามคิดออก!