[英]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.