Question

我已经查看了所有建议的文章，他们似乎解决了我想做的事情。而不是动态的'DIV'我需要将所述容器固定在尺寸和所述容器的内容中以根据内容的数量调整高度以适合div。我需要它来处理图像，而不是文本。

具体来说，我有一个div，其中包含wordpress网站“单页”帖子的thumnails。我希望用户能够添加20个缩略图，或者可能是10个，或者可能是100个。但是无论它们添加了多少，都会调整thumnails的高度，使它们都适合预先定义的“div”。

所以，换句话说，我需要我的缩略图的高度是包含div的高度的百分比，除以thumnails的数量......我想

示例照片包括我正在寻找的效果之前和之后：我已经在使用jquery做一些悬停动画，因此已经设置了一个脚本框架。我只是不知道如何开始做这样的事情。

谢谢你！

Answer 1

这是一个代码，它将修改每个图像的高度，以便所有高度的总和将是cotainer的所需高度：

// all image tags inside the container
var images = $('#container').find('img');
// desired height of the container (you can use also data- attribute)
var height = 400;
images.each(function() {
    // let's say 600 is the original width of the image
    $(this).css('width', '600px');
    // modify height of the image
    $(this).css('height', height / images.length + 'px');
});

HERE 是支持添加/删除和使用自定义事件的工作示例。

Answer 2

你也可以在没有使用css3 flexbox的javascript的情况下做到这一点，但你只会支持Webkit浏览器和Firefox。你的css看起来像：

#container {
  display: -moz-box;
  display: -webkit-box;
  display: box;
  height: 500px;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  box-orient: vertical;
}

#container div {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;
}

以下是http://jsfiddle.net/NtVTY/示例（javascript仅用于说明目的）。

但是，唉，我不建议使用它，它只是一个编码练习：）

缩略图的高度会随着添加/删除更多内容而动态变化，以适应其父DIV

2 个答案: