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;
}

这是我尝试执行此操作的简单方法。

http://jsfiddle.net/5cn6ya75/

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

编辑：在寻找答案的过程中，我遇到了shapeshifter，它似乎能够解决我的问题，但是使用绝对位置，然后计算到其他元素的偏移量。 我仍然对创建具有可变content-box-sizes（collapsable）的动态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;
}

我用#content上的display:flex声明和子级上的一些显式尺寸更新了您的小提琴 ； 如果您使用这些尺寸，则应该能够感觉到它的工作原理。

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

Answer 2

我建议您使用砖石 。
它是一个JavaScript库，用于层叠像yourse这样的网格样式布局。 我将其用作jQuery Plugin ，但您也可以独立使用它。

如果您调整砖石主页的大小，则可以看到它的工作方式。 此外，您还有很多自定义选项 。

---

关于Shapeshift ：

我不知道变形，但似乎它也可以完成您的工作。 我认为这有点过多的开销 ，因为您不需要使用Drag＆Drop等功能（并且如果您不使用JQuery，那将是最重要的）

---

“简单” CSS：
卡勒姆声明是正确的。 CSS3中没有自动方法。 您可以使用CSS媒体查询来设置一些Breakpoints ，但是要找到正确的Breakpoints和Values确实很困难（我认为不值得）。

---

正如我说过的（以及之前的其他人一样），还没有干净且“好”的CSS解决方案，也没有CSS网格系统。 最好的方法是使用JavaScript库（带有或不带有JQuery）。

Answer 3

 $( function() { $('#container').masonry({ itemSelector: '.item', columnWidth: 70 }); }); 

 .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; float: left; margin: 5px; } #box1{ height:50px; } #box2{ height:100px; } #box3{ height:30px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://masonry.desandro.com/masonry.pkgd.min.js"></script> <div id="container" class='content'> <div class='item' id="box1"></div> <div class='item' id="box2"></div> <div class='item' id="box3"></div> </div> 

试试吧。 现场演示 ， DEMO2

HTML

<div id="container" class='content'>
    <div class='item' id="box1"></div>
    <div class='item' id="box2"></div>
    <div class='item' id="box3"></div>
</div>

的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;
    float: left;
    margin: 5px;
}
#box1{
   height:50px; 
}
#box2{
   height:100px;
}
#box3{
   height:30px;
}

js

$( function() {

    $('#container').masonry({
        itemSelector: '.item',
        columnWidth: 70
    });

});

并添加

头中的js

http://masonry.desandro.com/masonry.pkgd.min.js

Answer 4

您在这里的问题是display：inline-block将“行”中的每个元素转换为与行中最大元素具有相同高度的块。

最好的选择是在#content div上设置最大高度，以使它们看起来都相等，或者使用媒体查询根据屏幕尺寸显示不同的网格。

Answer 5

我不太清楚您到底要做什么，但是如果您还是将列宽设置为固定的话，则可以尝试这样的媒体查询（只要您使div浮动）：

@media(max-width:927px){
#content{
    width: 608px;
}
#content #box2{
    float:right;
}
}

http://jsfiddle.net/5cn6ya75/8/