html - css 列布局问题

Question

我有一个带列的动态 ish 布局，其中列数取决于窗口宽度。

以图像为例，我有内容框，用户可以折叠这些框。如果屏幕足够宽，就会有 3 列。

现在有一个较小的窗口，只有 2 列，但是当左上角的框折叠时，下面的框不会向上移动。

我试过使用 column-count CSS 属性，但无法正常工作。在特定示例中，如果我的列数为 2，它会将 2 个框放在右列而不是左列中。

我的示例 CSS:

#content{
width:100%;;
height:100%;
display:inline-block;
}
#content div{
     border-color:black;
    border-style:solid;
    border-width:2px;
    display:inline-block;
    width:300px;

    vertical-align:top;
}
#box1{
   height:50px; 
}
#box2{
   height:100px;
}
#box3{
   height:30px;
}

这是一个简单的 jsfiddle，说明我是如何尝试做到这一点的。

http://jsfiddle.net/5cn6ya75/

是否有任何 html 元素结构的 CSS 属性使这成为可能。到目前为止，我能找到的唯一解决方案要么需要我有固定数量的列，要么需要内容框的固定高度。

编辑: 在寻找答案时，我遇到了 shapeshifter，它似乎能够解决我的问题，但通过使用绝对位置，然后计算到其他元素的偏移量。 我仍然对创建动态 x 列布局的更清晰的 css 方式非常感兴趣，该布局具有可变的内容框大小(可折叠)，其中元素将顶部对齐到其列中最近的元素。

Answer 1

如果我正确理解了您的问题，那么您绝对无需 javascript 即可执行此操作，前提是您的目标是现代浏览器。对于大多数复杂的布局，适合这项工作的工具是 flexbox .

所以这就是我认为你正在尝试做的事情:

• 如果视口(viewport)足够宽，将所有框按列排列
• 如果视口(viewport)不够足够宽，垂直放置框，根据需要换行到尽可能多的列

如果那是正确的，那么您需要的关键是

@media any and (max-width:[width]) {
  #content {
    display:flex;
    flex-direction: column;
    flex-wrap:wrap;
  }
}

您不一定需要子框上的规则，但您可以操纵它们在“折叠”其他框时出现的顺序:例如，以下将 #div1 移动到末尾

#content div {
  order:0;
}
#div1 {
  order:1 !important;
}

我已经更新了你的 fiddle在 #content 上使用 display:flex 声明，并在子项上使用一些明确的尺寸；如果您尝试使用这些尺寸，您应该能够感受到它是如何工作的。

您可能需要进一步调整以控制子 div 是否扩展以填充所有可用空间，以及列的间距。