问题是here。
第一个蓝色块具有min-height of 500px。它显示有关我的信息。因此，观看者按下了名为“ LueLisää”的按钮（表示更多信息）。蓝块应更改其高度，以免显得混乱。
这种情况应该发生：
新闻LueLisää
显示更多信息
增加蓝块的高度，
看起来不错（自动或大于500像素）
再次单击时，返回原始大小（500px）。
正在发生什么情况：
新闻LueLisää
显示更多信息
增加蓝块的高度
当我再次单击时不返回。
$(".more button:eq(0)").click(function(){
$(".about").css("height", "630px");
$(".visible:eq(0)").toggle('slow');
$(".hidden:eq(0)").toggle('slow');
});
您可以使用
.css ("height", "toggle")，但这只是在0px和原始（500px）之间切换。这里有任何解决方法吗？我应该使用
.animate吗？ 最佳答案
我认为您可以通过稍微移动CSS来实现此目的，我在firebug中玩得很快，而且我认为可以在没有任何强制高度的情况下完成此操作，这应该使您的头脑更加清晰！
我进行了一些更改：
#left {
display: inline-block;
width: 60%;
}
#right {
display: inline-block;
width: 39%; /* don't know why it doesn't like 100% total */
text-align:center;
vertical-align: top; /* make the image stay at the top */
}
.grid { /* Remove the height, and add extra padding (margin removed on left and right) */
margin: 0 auto;
padding: 150px 50px 50px;
width: 860px;
}
这些更改使内容可以自然流动-浮动意味着需要强制高度。