css列布局问题

Question

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

以图像为例,我有内容框,用户可以折叠.如果屏幕足够宽,则会有3列.

现在有一个较小的窗口,只有2列,但当左上方的框折叠时,下面的框不会向上.

我已经尝试使用列计数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属性可以实现这一点.到目前为止,我能找到的唯一解决方案要么我需要固定数量的列,要么在内容框上有固定的高度.

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

Answer 1

如果我理解正确的话你的问题,你可以完全做到这一点没有JavaScript的,前提是你要定位的现代浏览器.与大多数复杂的布局一样,适合工作的工具是flexbox.

所以这就是我认为你要做的事情:

• 如果视口足够宽,则在列中布置所有框
• 如果视口不足够宽,布局垂直盒,包装纸,以尽可能多列

如果这是正确的,那么你需要的关键就在于此

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

您不一定需要子框上的规则,但您可以操纵它们在"折叠"其他框时的显示顺序:例如,以下移动#div1到最后

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

我已经更新了你的小提琴,关于孩子的display:flex声明#content和一些明确的尺寸; 如果您使用这些尺寸,您应该能够感受它的工作原理.

您可能需要进一步调整以控制子项是否div展开以填充所有可用空间,以及列如何间隔.