250px genişliğinde bir üst içine sığabilecek 100px genişliğinde, divs sonsuz sayıda var. Yükseklik ne olursa olsun, resimde gösterildiği gibi divs satır görüntülenecek ihtiyacım var. Bu çözme denedim, ama div yüksekliği bozuyor gibi görünüyor.

Gerçekten çok memnun olurum. Teşekkür ederim :)

        <style>
            #holder{
            width:250px;
            border:1px dotted blue;
            display:inline-block;
        }
        .box{
            width:100px;
            height:150px;
            background-color:#CCC;
            float:left;
            text-align:center;
            font-size:45px;
            display:inline-block;
        }
        .one{
            background-color:#0F0;
            height:200px;
        }

        .two{
            background-color:#0FF;
        }

        .three{
            background-color:#00F;
        }

        .four{
            background-color:#FF0;
        }
    </style>

    <div id="holder">
        <div class="box one">1</div>
        <div class="box two">2</div>
        <div class="box three">3</div>
        <div class="box four">4</div>
    </div>

Burada jsfiddle

Bildiğim kadarıyla, saf CSS tüm ortak tarayıcılarda çalışan () ile bu sorunu çözmek için bir yol var

• Yüzer don't work.
• display: inline-block doesn't work.
• position: absolute position: relative manual pixel tuning gerektirir. Sunucu taraflı bir dil kullanıyorsun ve görüntüler (ya da tahmin edilebilir yükseklik olan bir şey) ile çalışıyorsanız, piksel ayarlama "" sunucu tarafı kodu. otomatik olarak işleyebilir

Bunun yerine, jQuery Masonry kullanın.