html - 如何根据内容将元素高度限制为特定值 (“stepped” )

Question

这是对我之前发现的问题 here 的跟进.有什么办法可以在 div 上实现“基于台阶的高度”，我无法更好地描述它？我做了一点fiddle展示我所拥有的。

我现在的目标是，每个盒子的高度都是 400 像素的倍数。因此，如果一个盒子的高度为:auto；将是 345px，它应该是 400px，如果它在 400 和 800px 之间，它应该是 800px 等等。不幸的是，我还没有找到任何有用的东西来实现这一目标。有什么想法吗？

这应该只能通过 html 和 css 来实现。 jQuery 解决方案可能如下所示:

$('div').each(resize);

function resize(){
    var height = $(this).css( "height" );
    var newHeight = Math.ceil(parseInt(height) / 400) * 400;
    $(this).css('height', newHeight+'px');
}

Answer 1

This should be achieved ONLY with html and css

不幸的是，CSS 不是一种编程语言，因此没有可以实现此目的的属性。

所以，基本上...如果没有 JS/JQ，这是不可能的。