ギャップと浮きのない中央のグリッドのグリッド

Question

グリッドは、ブロックが中央揃えの場所に設定されているため、display: inline blockを使用してこれを実行し、コンテナにtext-align: centerを設定します。しかし、クライアントはブロック上で可変的な高さを望んでおり、インラインブロックになるとグリッドに大きなギャップを残します。あるいは、float: leftを使用することもできますが、ブロックを中央揃えする必要があるため、これは機能しません。私はここにコードセットのセットアップを持っています：https://codepen.io/anon/pen/WOaeve

私は通常、グリッドにアイソトーププラグインを使用しますが、中央に配置されたブロックを許可するレイアウトモードはありませんので、グリッドのすべての隙間塗りつぶされ、ブロックが中央に配置されます。私のCSSマークアップもここにあります：

.feed-grid { 
    position: relative; 
    display: block; 
    width: 100%; 
    height: auto; 
    text-align: center; 
    font-size: 0; 
} 

.feed-grid .grid-block { 
    display: inline-block; 
    vertical-align: top; 
    margin-left: 6px; 
    margin-right: 6px; 
    margin-bottom: 12px; 
    width: auto; 
    height: 255px; 
} 

.feed-grid .grid-block.large { 
    height: 522px; 
} 

.feed-grid .grid-block img { 
    position: relative; 
    display: block; 
    width: auto; 
    height: 255px; 
} 

.feed-grid .grid-block.large img { 
    height: 522px; 
} 

これに対する解決策は非常に高く評価されます！

Answer 1

問題が解決する場合があります。私はfloat: left;を.child要素に使っています。

.container {background: green; overflow: hidden; text-align: center; padding: 15px;} 
 
.center-element {float: none; background: yellow; overflow: hidden; width: auto; box-sizing: border-box; display: inline-block; padding: 5px; vertical-align: middle;} 
 
.child {float: left; padding: 12px 24px; background-color: red;} 
 
.child:not(:first-child) {margin-left: 5px;}

<div class="container"> 
 
\t <div class="center-element"> 
 
\t \t <div class="child"></div> 
 
\t \t <div class="child"></div> 
 
\t \t <div class="child"></div> 
 
\t \t <div class="child"></div> 
 
\t \t <div class="child"></div> 
 
\t \t <div class="child"></div> 
 
\t </div> 
 
</div>

Answer 2

あなたがその「行」よりも小さいイメージを持っている場合は、垂直真ん中alignementについて ？ここで

はそれ途中でそれらを作る...小さな画像に余白を適用するための「対策」行の高さCodePen

$(document).ready(function(){ 
    var rowHeight = 0; 
    var rowHeights = []; 
    var rowCount = 0; 
    var offset = $(".grid-block").first().offset().top; 

    // Loop throught all images to get their heights. 
    $(".grid-block img").each(function(){ 

    // If on the same row 
    if($(this).offset().top == offset){ 
     // Find the biggest height 
     if($(this).height() > rowHeight){ 
     rowHeight = $(this).height(); 
     rowHeights[rowCount] = rowHeight; 
     } 

     // If the row is different. 
    }else{ 
     // Get the new row offset. 
     offset = $(this).offset().top; 
     rowCount++; 

     rowHeight = $(this).height(); 
     rowHeights.push(rowHeight); 
    } 

    // Set a custom attribute to apply the right margins. 
    $(this).attr("data-row",rowCount); 
    }); 

    //Here you have the array of row heights in console. 
    console.log(JSON.stringify(rowHeights)); 


    // Loop again to apply some margins. 
    $(".grid-block img").each(function(){ 
    var thisRowHeight = rowHeights[parseInt($(this).data("row"))]; 

    // Apply the margin if this image is smaller than the row height. 
    if($(this).height() < thisRowHeight){ 
     var margin = (thisRowHeight - $(this).height())/2; 
     $(this).css({"margin":margin+"px 0"}); 
    } 
    }); 
}); 

です。