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>

CSS多列布局可防止高度更改时移动列

1 个答案: