CSSの複数列レイアウトは、高さが変更されたときに列が移動しないようにします。

Question

列の高さを変更したときに列が移動しないようにする方法を考えようとしています。 ルックJSFiddle、見に3列のリンクをクリックしてください：https://jsfiddle.net/g305643f/1/

あなたは非マルチ列を持つソリューションを提供したい場合は - 列を構築するこのタスクは、以下の条件の下で、他の方法を用いて実現することができる。

をデスクトップで

我々はこれを必要とする：タブレット

1 3 5 
2 4 

：

1 4 
2 5 
3 

はフィンませんでしたflex/float/inline-blocksを使用しているので、マルチカラムで作成できました。デバイスがモバイル用途であればメディアクエリーは、異なるメディアタイプ/デバイスごとに異なるスタイルのルールを定義するには、このシナリオでは、あなたの例では

を使用していい、あなたが書くことができます

$(document).ready(function() { 
 
    $(".open").click(function(e){ 
 
    $(this).next().slideToggle(); 
 
    e.preventDefault(); 
 
    }); 
 
});

.sections { 
 
    -webkit-column-gap:41px; 
 
    -moz-column-gap:41px; 
 
    column-gap:41px; 
 
    -moz-column-count: 3; 
 
    -webkit-column-count: 3; 
 
    column-count: 3; 
 
} 
 
.section { 
 
    -webkit-column-break-after: avoid; 
 
    -webkit-column-break-before: avoid; 
 
    break-inside: avoid; 
 
    -webkit-column-break-inside: avoid; 
 
    page-break-inside: avoid; 
 
} 
 
.open { 
 
    display: block; 
 
    text-transform: uppercase; 
 
    margin: 10px 0; 
 
    font-family: "Helvetica"; 
 
} 
 
.hidden { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="sections"> 
 
    <div class="section"> 
 
    <img src="http://placehold.it/300x300" /> 
 
    </div> 
 
    <div class="section"> 
 
    <img src="http://placehold.it/300x310" /> 
 
    </div> 
 
    <div class="section"> 
 
    
 
    <a href="#" class="open">Open & raise height</a> 
 
    <div class="hidden"> 
 
    <img src="http://placehold.it/300x320" /> 
 
    </div> 
 
    <img src="http://placehold.it/300x330" /> 
 
    </div> 
 
    <div class="section"> 
 
    <img src="http://placehold.it/300x340" /> 
 
    </div> 
 
    <div class="section"> 
 
    <a href="#" class="open">Open & raise height</a> 
 
    <div class="hidden"> 
 
    <img src="http://placehold.it/300x320" /> 
 
    </div> 
 
    <a href="#" class="open">Open & raise height</a> 
 
    <div class="hidden"> 
 
    <img src="http://placehold.it/300x320" /> 
 
    </div> 
 
    <img src="http://placehold.it/300x350" /> 
 
    </div> 
 
</div>

Answer 1

1列、デバイスがタブレットを使用する2列で、デバイスがデスクトップ用の3列の場合、hereはDan Wahlinの素晴らしいブログです。

このようなもの：

$(document).ready(function() { 
 
    $(".open").click(function(e){ 
 
    $(this).next().slideToggle(); 
 
    e.preventDefault(); 
 
    }); 
 
});

/*Phone*/ 
 
@media only screen and (max-width:320px) 
 
{ 
 
    .sections { 
 
    
 
    -moz-column-count: 1; 
 
    -webkit-column-count: 1; 
 
    column-count: 1; 
 
} 
 
    
 
} 
 

 
/* Tablet*/ 
 
@media only screen and (min-width:321px) and (max-width:768px) 
 
{ 
 
    .sections { 
 
    -webkit-column-gap:41px; 
 
    -moz-column-gap:41px; 
 
    column-gap:41px; 
 
    -moz-column-count: 2; 
 
    -webkit-column-count: 2; 
 
    column-count: 2; 
 
} 
 
    
 
} 
 

 
/* Desktop */ 
 
@media only screen and (min-width:769px) 
 
{ 
 
    .sections { 
 
    -webkit-column-gap:41px; 
 
    -moz-column-gap:41px; 
 
    column-gap:41px; 
 
    -moz-column-count: 3; 
 
    -webkit-column-count: 3; 
 
    column-count: 3; 
 
} 
 
    
 
} 
 

 
.section { 
 
    -webkit-column-break-after: avoid; 
 
    -webkit-column-break-before: avoid; 
 
    break-inside: avoid; 
 
    -webkit-column-break-inside: avoid; 
 
    page-break-inside: avoid; 
 
} 
 
.open { 
 
    display: block; 
 
    text-transform: uppercase; 
 
    margin: 10px 0; 
 
    font-family: "Helvetica"; 
 
} 
 
.hidden { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="sections"> 
 
    <div class="section"> 
 
    <img src="http://placehold.it/300x300" /> 
 
    </div> 
 
    <div class="section"> 
 
    <img src="http://placehold.it/300x310" /> 
 
    </div> 
 
    <div class="section"> 
 
    
 
    <a href="#" class="open">Open & raise height</a> 
 
    <div class="hidden"> 
 
    <img src="http://placehold.it/300x320" /> 
 
    </div> 
 
    <img src="http://placehold.it/300x330" /> 
 
    </div> 
 
    <div class="section"> 
 
    <img src="http://placehold.it/300x340" /> 
 
    </div> 
 
    <div class="section"> 
 
    <a href="#" class="open">Open & raise height</a> 
 
    <div class="hidden"> 
 
    <img src="http://placehold.it/300x320" /> 
 
    </div> 
 
    <a href="#" class="open">Open & raise height</a> 
 
    <div class="hidden"> 
 
    <img src="http://placehold.it/300x320" /> 
 
    </div> 
 
    <img src="http://placehold.it/300x350" /> 
 
    </div> 
 
</div>