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>