Tam genişlikli öğeler içeren duvarlar

Question

Yere% 100 genişlikte ve kalan% 50 genişlikte bir öğeye gereksinim duyduğumda, düzen artık öğelerimi birbirine bitişik bırakmıyorsa, Masonry ile ilgili bir sorun yaşıyorum. İstediğim şey,% 100 -width öğesi olmadığında, yan yana görünecek öğeler içindir. https://jsfiddle.net/ubmf47s4/2/

<div id="boxes" class="masonry clearfix"> 
    <div class="box box-fw" style="background: cyan;"> 
     <div class="inner"> 
     <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p> 
     </div> 
    </div> 
    <div class="box" style="background: magenta;"> 
     <div class="inner"> 
     <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p> 
     </div> 
    </div> 
    <div class="box" style="background: yellow;"> 
     <div class="inner"> 
     <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p> 
     </div> 
    </div> 
    <div class="box" style="background: grey;"> 
     <div class="inner"> 
     <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd </p> 
     </div> 
    </div> 
</div> 

.box{ 
    width: 50%; 
    box-sizing:border-box; 
} 

.box-fw{ 
    width:100% 
} 

    $(function(){ 
    var container = $('#boxes'); 

    container.imagesLoaded(function(){ 
     //console.log("Images loaded!"); 
     container.masonry({ 
      itemSelector: '.box', 
      isAnimated: true 
     }); 
    }); 
}); 

Answer 1

Duvar doğrudan piksel değeri veya bir seçici olabilir ya da içeriğinizi hazırlamak için sütunların genişliğini belirlemek için bir columnWidth gerektirir: Burada

bir js keman var ölçmek için eleman. Kodunuzda columnWidth belirtilmemiş olduğundan, Masonry, sütun genişliğini belirlemek için duvar kapsayıcınızdaki ilk öğeyi ölçmeye yarar. İlk elementiniz% 100 genişliğinden ötürü olduğu için, Masonry bunu ölçer ve sütun genişliğinizi% 100'e ayarlar, bu nedenle% 50'lik ekran öğeleriniz artık yan yana görünmez (tüm duvar düzeniniz etkin bir şekilde etkilidir). tek kolon). Bu davranış hakkında daha fazla bilgi in the Masonry docs for columnWidth. Ben kullanılarak% 50 büyüklüğünde ettik sınıfa column-sizer, bir öğe kullandım bu durumda - Bunu düzeltmek için

---

bir yolu Duvar Sütun genişliğini kurmak ölçebilen bir öğe belirtmektir CSS. Yığma, düzen için sütun boyutunu belirlemek için bu öğeyi ölçer. Tekniği David Desandro's fluid columnWidth CodePen example'dan ödünç aldım. Sonuç

Ekran Görüntüsü:

Çalışma Canlı Demo:

$(function() { 
 
    var container = $('#boxes'); 
 

 
    container.imagesLoaded(function() { 
 
    //console.log("Images loaded!"); 
 
    container.masonry({ 
 
     itemSelector: '.box', 
 
     columnWidth: '.column-sizer', 
 
     isAnimated: true 
 
    }); 
 
    }); 
 
});

html, 
 
body { 
 
    margin: 0; 
 
} 
 
.box, 
 
.column-sizer { 
 
    width: 50%; 
 
    box-sizing: border-box; 
 
} 
 
.box-fw { 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://npmcdn.com/masonry-layout@4.0.0/dist/masonry.pkgd.min.js"></script> 
 
<script src="https://npmcdn.com/imagesloaded@4.1.0/imagesloaded.pkgd.min.js"></script> 
 

 
<div id="boxes" class="masonry clearfix"> 
 
    <div class="column-sizer"></div> 
 
    <div class="box box-fw" style="background: cyan;"> 
 
    <div class="inner"> 
 
     <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd</p> 
 
    </div> 
 
    </div> 
 
    <div class="box" style="background: magenta;"> 
 
    <div class="inner"> 
 
     <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd</p> 
 
    </div> 
 
    </div> 
 
    <div class="box" style="background: yellow;"> 
 
    <div class="inner"> 
 
     <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd</p> 
 
    </div> 
 
    </div> 
 
    <div class="box" style="background: grey;"> 
 
    <div class="inner"> 
 
     <p>lkaj dlksaj ldksjf lkdj flksd flkds flkds flksd jfakldsjf lkdsj flkjfd</p> 
 
    </div> 
 
    </div> 
 
</div>

JSFiddle Versiyon: https://jsfiddle.net/x9mf2c6x/