隐藏的div的高度不会随着砖石内容而扩展 [英] Height of hidden div doesn't expand with Masonry content
本文介绍了隐藏的div的高度不会随着砖石内容而扩展的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个脚本，可切换div的可见性，div内是砌筑插件加载的内容.我遇到的问题是，在装入砖石内容时，砖石div(以及两个包装器div)的高度不会增加-它将砖石物品压在一起.
I have a script that toggles the visibility of a div, inside of the div is content loaded with the masonry plugin. The issue I'm having is that the masonry div (and as a result the two wrapper divs) doesn't expand in height as the masonry content is loaded - it squishes the masonry items together.
这是我的代码:
<html>
<head>
<title>view?</title>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script type='text/javascript' src="http://masonry.desandro.com/jquery.masonry.min.js"></script>
<style type="text/css">
#step_wrapper{
width:960px;
margin:0px auto;
/*float:left;*/
}
.step_num{
float:left;
width:50px;
background-color:#0099ff;
}
.step{
float:left;
width:910px;
background-color:#ff0000;
padding-bottom:20px;
margin-bottom:20px;
}
.step h2{
padding:0px;
margin:0px;
}
.media{
background-color:#59A20E;
width:100%;
text-align:center;
cursor:hand;
float:left;
}
#content-step-1{
}
.content{
float:left;
min-width:785px;
margin-left:40px;
background-color:#0066ff;
padding-left:15px;
display:none;
}
.item {
width: 165px;
float: left;
padding:5px;
background-color:#FF0;
margin-top:10px;
}
</style>
<script>
$(function(){
<!-- masonry plugin -->
var $container = $('#content-step-1');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector : '.item',
columnWidth : 165
});
});
$($container).masonry({
// options
itemSelector : '.item',
columnWidth : 165,
gutterWidth : 35
});
<!-- masonry plugin -->
<!-- needs to be auto generated -->
$("#step-1").click(function () {
$("#content-step-1").toggle("fast");
});
<!-- needs to be auto generated -->
});
</script>
</head>
<body>
<div id="step_wrapper">
<div class="step_num">1)</div>
<div class="step">
<h2>STEP ONE SON</h2>
<p>Description here bro</p>
<div id="step-1" class="media">expand</div>
<div id="content-step-1" class="content">
<div class="item">asjdlajskdla</div>
<div class="item"><img src="http://farm5.static.flickr.com/4153/5013039741_d860fb640b.jpg" width='165' /></div>
<div class="item">baksdkjasdasdsdadasdasda</div>
<div class="item">asjdlajskdla</div>
<div class="item">baksdkjjsdksd</div>
<div class="item">baksdkjasdasdsdadasdasda</div>
<div class="item">asjdlajskdla</div>
<div class="item">baksdkjjsdksd</div>
</div>
</div>
</div>
</body>
</html>
任何帮助将不胜感激，谢谢！
any help would be greatly appreciated, thank you!
推荐答案
几天前我遇到了笑脸问题.当您单击打开隐藏的div时，您需要执行的操作比reload砌体视图要大.通过使用下面的内容.
I had faced smiler problem few day ago. what you need to do here, when you click to open hidden div than you have to reload masonry view. By using below.
$("#step-1").click(function () {
$("#content-step-1").toggle("fast");
$container.masonry('reload');
});
这篇关于隐藏的div的高度不会随着砖石内容而扩展的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
