جعل شعبة الخارجي يكون تلقائيا بنفس ارتفاع محتوى العائمة لها

Question

وأريد div الخارجي، وهو الأسود التفاف divs لها العائمة في داخلها. أنا لا أريد أن استخدام 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>

وكيفية تحقيق ذلك؟

Answer 1

ويمكنك ضبط CSS لouterdiv لهذا

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

ويمكنك أيضا القيام بذلك عن طريق إضافة عنصر في نهاية مع clear: both. هذا يمكن أن تضاف عادة، مع JS (وليس حلا جيدا) أو مع :after عنصر CSS الزائفة (غير معتمدة على نطاق واسع في الكيانات المستقلة القديمة).

والمشكلة هي أن وحاويات لا تتوسع بشكل طبيعي لتشمل الأطفال طرحت. حذر من أن يكون باستخدام المثال الأول، إذا كان لديك أي عناصر الأطفال خارج العنصر الأصل، وأنها ستكون مخفية. يمكنك أيضا استخدام "السيارات" حيث بلغت قيمة الممتلكات، ولكن هذا سوف تحتج التمرير إذا ظهر أي عنصر خارج.

ويمكنك أيضا محاولة تعويم الحاوية الأصلية، ولكن اعتمادا على التصميم الخاص بك، وهذا قد يكون من المستحيل / صعوبة.

Answer 2

أولا، أنا أوصي لكم نفعل التصميم الخاص بك CSS في ملف CSS الخارجي، بدلا من فعل ذلك المضمنة. انه من الاسهل بكثير للحفاظ على ويمكن أن تكون أكثر قابلة لإعادة الاستخدام باستخدام الفئات.

العمل خارج الإجابة اليكس (& clearfix علية و) من "إضافة عنصر في نهاية مع واضحة: على حد سواء"، يمكنك أن تفعل ذلك كما يلي:

    <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 ليست جميلة جدا).

Answer 3

وأنت قد ترغب في محاولة يطفو ذاتية الإغلاق، كما هو مفصل في HTTP: / /www.sitepoint.com/simple-clearing-of-floats/

وهكذا ربما محاولة إما overflow: auto (يعمل عادة)، أو overflow: hidden، كما قال اليكس.

Answer 4

وأنا أعرف بعض الناس سوف يكرهونني، ولكني وجدت display:table-cell للمساعدة في هذا الحالات.

ووأنظف حقا.

Answer 5

وأولا وقبل كل شيء لا تستخدم width=300px هذا ما الإعداد سمة للعلامة لا CSS، واستخدام width: 300px; بدلا من ذلك.

وأود أن أقترح تطبيق تقنية clearfix على #outerdiv. Clearfix هو الحل العام لمسح 2 عناصر div عائمة حتى شعبة الأم سوف توسع لاستيعاب 2 العائمة عناصر div.

<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 لحلها.

Answer 6

استخدم مسج:

وتعيين الطول الوالدين = offsetHeight الطفل.

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

Answer 7

استخدم clear: both;

وقضيت أكثر من أسبوع في محاولة لمعرفة ذلك!