Question

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

<!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不在div下，我怎么能在div 1下使用这个div 5。可能是这个div会改变它的高度可能是一些div会改变它的高度现在我想知道当divs高度变化时我该怎么做。你能告诉我怎么做吗？

Answer 1

CSS can't do this，因为您的列数可变。

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

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

Answer 2

我能做的唯一事情是

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

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

HTML可更改的div高度，静态宽度为div

2 个答案: