CSS多列布局可防止高度發生變化時移動列

Question

嘗試計算在更改列高度時如何防止列移動。 看的jsfiddle，嘗試點擊3欄鏈接查看：https://jsfiddle.net/g305643f/1/

如果你想提供與非多列的解決方案 - 建築物立柱的這個任務可以用下面的條件下，其他的方法來實現：

在桌面上，我們需要這樣的：

1 3 5 
2 4 

在平板電腦：

1 4 
2 5 
3 

沒有鰭d解決方案與Flex /浮動/嵌入塊，使它與多列，現在發現這個問題。

$(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偉大的博客從丹華林媒體查詢

類似這樣的：

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