简体   繁体   English

HTML可变div高度,静态宽度很多div

[英]HTML changeable div height with static width lots of divs

I think everyone knows this site http://pinterest.com/ and I don't want to create site like this but I have another purpose I want to create divs under divs with static width and the height always changeable value. 我想每个人都知道这个站点http://pinterest.com/ ,我不想创建这样的站点,但我还有另一个目的,就是要在div下创建div,且div的宽度和宽度都是静态的。

I made HTML code here it is: http://jsbin.com/ihekiv 我在这里制作了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>

In my HTML code you can clearly see div five not going under div one how can I take this div five under div one. 在我的HTML代码中,您可以清楚地看到div 5不属于div一,我该如何将div 5归入div一。 may be this div one will change its height may be some divs will change its height now I want to know how can I do this when the divs height getting changeable. 可能是这个div会更改其高度,也许是一些div会更改其高度,现在我想知道当div的高度变得可变时我该怎么做。 Could you anyone please tell me how to do this. 谁能告诉我如何做到这一点。

CSS can't do this , because you have a variable number of columns. CSS 无法做到这一点 ,因为您有可变数量的列。

Instead, use jQuery Masonry: http://masonry.desandro.com/ 相反,请使用jQuery Masonry: http//masonry.desandro.com/

There's also a no-framework version, Vanilla Masonry: http://vanilla-masonry.desandro.com/ 还有一个无框架版本Vanilla Masonry: http//vanilla-masonry.desandro.com/

The only thing I can thing of is 我唯一能做的是

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

It's not a good solution and is only support on webtkit. 这不是一个好的解决方案,仅在webtkit上受支持。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM