Html 如何以正确的方式浮动或内联块

一个容器内有四个或四个以上的div，就像一个完美的拼图，最后一个div填充剩余的高度

这张图片说明了它应该是什么样子

我现在的位置：

.包裹{ 浮动：左； 背景：fff； 宽度：100%； } .get2{ 浮动：左； 高度：自动； 宽度：50%； } 1. abc 2. 3. D E 4. 嘿，你可以试着给出我下面给出的最小高度

    .get2{
    float:left;
    height:auto;
    width:50%;
    min-height:120px
}

---

修好了！因此，我内联阻止div和nth-child2n左边距：-4px以消除空白，垂直对齐：顶部，然后我添加的最后一部分：填充底部：9999px；保证金底部：-99999像素

试试这个-

从.wrap和.get2中移除浮动 删除文本对齐：居中；来自正文css 将以下css添加到.get2-文本对齐：居中；显示：内联块； 垂直对齐：顶部； 添加左边距：-4px；css to.get2:nth-child2{} 并加上左边的边距：-4px；利润上限：-17px；css to.get2:nth-child4

---

Flexbox的救援没有肮脏的黑客：

身体{ 背景：2000人； 颜色：ccc； 文本对齐：居中； 利润率：10px； } .包裹{ 背景：fff； 宽度：100%； 显示器：flex； 柔性包装：包装； 高度：自动； } .get2{ 高度：自动； 宽度：50%； } .get2:nth-child1{ 背景：红色； } .get2:nth-child2{ 背景：绿色； } .get2:nth-child3{ 背景：黄色； } .get2:nth-child4{ 背景：蓝色； } 1. abc 2. 3. D E 4.

---

美好的这是我刚刚计算出来的，而不是左边的边距：-4，这很混乱尝试删除get2 div之间的空格/返回。。。听起来很乱，对吧？我用来清理内联块元素的技巧是使用注释来删除不需要的空格/返回。您可能想了解为什么使用9999px或在您的情况下使用9999px是件坏事：

.wrap{
float:left;
background:#fff;
width:100%;
 overflow:hidden;
}
.get2:nth-child(2n){
margin-left:-4px;
}
.get2{
  vertical-align:top;
    display:inline-block;
    height:auto;
    width:50%;
    padding-bottom: 99999px;
    margin-bottom: -99999px;
}