-1

我想每个人都知道这个网站http://pinterest.com/，我不想创建这样的网站，但我还有另一个目的，我想在 div 下创建具有静态宽度和高度始终可变值的 div。

我在这里制作了 HTML 代码：http: //jsbin.com/ihekiv

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
    div{
        margin: 5px;
    }
    .width-200{
        width: 200px;
    background-color: #FCF;
    }
    .float-left{
        float: left;
    }
</style>


</head>

<body>

    <div class="width-200 float-left color-01" style="height: 300px;">
    </div>

    <div class="width-200 float-left color-01" style="height: 250px;">
    </div>

    <div class="width-200 float-left color-01" style="height: 250px;">
    </div>

    <div class="width-200 float-left color-01" style="height: 250px;">
    </div>

    <div class="width-200 float-left color-01" style="height: 250px;">
    </div>

    <div class="width-200 float-left color-01" style="height: 250px;">
    </div>

    <div class="width-200 float-left color-01" style="height: 250px;">
    </div>

    <div class="width-200 float-left color-01" style="height: 250px;">
    </div>

    <div class="width-200 float-left color-01" style="height: 250px;">
    </div>

</body>
</html>

在我的 HTML 代码中，您可以清楚地看到 div 5 不在 div 1 下，我如何才能将 div 5 放在 div 1 下。可能是这个 div 会改变它的高度 可能是一些 div 会改变它的高度现在我想知道当 div 的高度变得可变时我该怎么做。谁能告诉我如何做到这一点。

4

2 回答 2

3

CSS无法做到这一点，因为您有可变数量的列。

相反，使用 jQuery Masonry： http: //masonry.desandro.com/

还有一个无框架版本，Vanilla Masonry：http: //vanilla-masonry.desandro.com/

于 2012-06-12T15:10:20.107 回答
1

我唯一能做的就是

body {
-webkit-column-count: 5;
-webkit-column-gap: 0px;
-webkit-column-width: 200px;
}

这不是一个好的解决方案，仅支持 webtkit。

于 2012-06-12T17:59:58.307 回答