Question

提前抱歉，因为我一直在想要问什么问题，甚至开始努力解决这个问题。

我一直试图找到一种方法来制作带有边距的对象（div，img等）来压缩父div。起初我以为漂浮会解决我所有的问题，但我对此很新，并很快意识到它不会

这留下了许多丑陋的空间。超过该行的div下降到下一行，并将其高度从它们上方div的底部开始。

有没有人知道使用html，css或J脚本绕过这个方法？没有很多限制。同样在实践中使用我会让所有的孩子div都有自己的id，这只是为了简化。

#parent {
height: 600px; width:600px;
}
.childsmall
{
     background-color:#0F0; height: 100px; width: 100px; float: left; margin: 10px;
}
.childmed
{
background-color:#0FF; height: 150px; width: 150px; float: left; margin: 10px;
}
.childlarge
{
background-color:#000; height: 200px; width: 200px; float: left; margin: 10px;
}
</style>
</head>

<body>
  <div id="parent">
    <div class="childsmall"></div>
    <div class="childsmall"></div>
    <div class="childmed"></div>
    <div class="childsmall"></div>
    <div class="childsmall"></div>
    <div class="childsmall"></div>
    <div class="childlarge"></div>
    <div class="childsmall"></div>
    <div class="childsmall"></div>
    <div class="childmed"></div>
    <div class="childsmall"></div>
    <div class="childsmall"></div>
    <div class="childsmall"></div>
    <div class="childsmall"></div>
    <div class="childmed"></div>
    <div class="childlarge"></div>
  </div>
</body>
</html>

Answer 1

你想要实现的目标需要一些JavaScript“魔力”。看看这个：http://masonry.desandro.com/

让Child Divs适合父母Div

1 个答案: