Css 重叠的div框，如googlekeep

如何制作像google keep这样的重叠div框

任何回答都将不胜感激！ 谢谢

检查此代码笔

https://codepen.io/rahulkapoor/pen/uAhzx

此外，bootstrap 4还具有class卡列，这可能有助于实现您的目标

http://v4-alpha.getbootstrap.com/components/card/#Cardcolumns

---

您可以将页面划分为网格，并用div填充每一列。您可以使用css或html来实现所需的结果。

实现这一点的最佳（也是最向后兼容的）方法是创建一系列水平相邻的

div

s。它们将在JavaScript中创建，并且每一个都具有相同的宽度，因此它们加起来等于容器宽度的100%。例如：

for(i = 0; i < numColumns; i++) { 
    var column = $("<div class='column'></div>");
    column.css("width", (100 / numColumns) + "px");
    $("#column-container-id-here").append(column);
}

（i=0；i 变量列=$（“”）； css列（“宽度”（100/numColumns）+“px”）； $（“#此处为列容器id”）.append（列）； }

---

类

列

必须在样式表中定义，才能具有

inline block

的

display

属性，以便所有

div

都能像列一样工作。然后，在每个

列的
div中，您可以拥有您的卡（也可以是
div
s），它们将自动垂直堆叠。
重叠div是什么意思？请说得更具体些。div的排列盒取决于上面另一个div的高度。太好了，谢谢！太好了，谢谢！