Dış div'i kayan içeriğiyle otomatik olarak aynı yükseklikte yapın

divSiyah olan dış divtarafın içinde yüzmesini istiyorum. Kullanmak istediğim daha dont style='height: 200pxiçinde divolan outerdivben (örneğin, yüzer otomatik içeriğinin yüksekliği olmasını istediğiniz gibi id divler).

<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>

Bunu nasıl başarabilirim?

outerdivCSS'sini buna ayarlayabilirsiniz

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

Bunu sonuna ile bir eleman ekleyerek de yapabilirsiniz clear: both. Bu, JS ile (iyi bir çözüm değildir) veya :afterCSS sözde elemanıyla (eski IE'lerde yaygın olarak desteklenmez ) normal olarak eklenebilir .

Sorun şu ki, kaplar yüzen çocukları içerecek şekilde doğal olarak genişlemiyor. İlk örneği kullanarak uyarıda bulunun, ana öğenin dışında herhangi bir alt öğe varsa, bunlar gizlenecektir. Özellik değeri olarak 'auto' da kullanabilirsiniz, ancak bu, dışarıda herhangi bir öğe görünürse kaydırma çubuklarını çağırır.

Üst kapsayıcıyı yüzdürmeyi de deneyebilirsiniz, ancak tasarımınıza bağlı olarak bu imkansız / zor olabilir.

Öncelikle, CSS stilinizi satır içi yapmak yerine harici bir CSS dosyasında yapmanızı şiddetle tavsiye ederim. Sınıfları kullanarak bakımı çok daha kolaydır ve daha yeniden kullanılabilir olabilir.

Alex'in "sonuna net bir öğe ekleyerek: her ikisi de" yanıtını (ve Garret'in açık ekini) inceleyerek, bunu şöyle yapabilirsiniz:

    <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>

Bu işe yarar (ancak gördüğünüz gibi satır içi CSS o kadar da hoş değil).

Http://www.sitepoint.com/simple-clearing-of-floats/ adresinde ayrıntılı olarak açıklandığı gibi kendi kendine kapanan şamandıraları denemek isteyebilirsiniz.

Yani belki overflow: auto(genellikle işe yarar) ya overflow: hiddenda Alex'in dediği gibi deneyin .

Bazı insanların benden nefret edeceğini biliyorum, ancak display:table-cellbu durumlarda yardım ettim .

Gerçekten daha temiz.

Öncelikle kullanmadığınız width=300pxbu, CSS değil etiketi için bir öznitelik ayarıdır, width: 300px;bunun yerine kullanın.

Ben uygulayarak öneririm clearfixüzerinde tekniğini #outerdiv. Clearfix , 2 kayan div'i temizlemek için genel bir çözümdür, böylece üst div, 2 kayan div'i barındıracak şekilde genişler.

<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>

İşte durumunuza ve Clearfix'in sorunu çözmek için yaptıklarına bir örnek .

JQuery kullanın:

Ebeveyn Yüksekliğini Ayarla = Çocuk ofset Yüksekliği.

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

Kullanım clear: both;

Bunu anlamaya çalışmak için bir haftadan fazla zaman harcadım!