Question

我很难处理客户的要求。有一个非常小的盒子（230px x 200px），其中包含一个图像，该图像将在悬停时由列表覆盖。现在，客户希望列表中的项目多于框中的项目。但是在叠加上滚动感觉不对，所以我需要一些其他类型的设计解决方案。

我知道这不是一个硬核编程问题，但我依赖社区对酷js / css黑客和插件的了解，可以解决我的问题。

Answer 1

如果您或客户可以修改显示的数据量。然后分析块的大小，查看它将保留的最大字符数，然后修改服务器脚本以相应地显示数据。而不是试图从设计的角度来适应它，而不是每次都是解决方案。

否则，如果你真的想从deisgn本身那里做，那么尝试根据里面显示的数据量调整字体大小和间距。这看起来有点尴尬，因为每个块将具有不同的字体大小。但如果这不是您的客户关注的问题，那么您可以继续尝试。

如果不考虑不同的字体大小，这样的事情可能会起作用。我将默认字体大小设置为16px。

<div class="infos">Some Text</div>
<div class="infos">Some Text</div>
<div class="infos">Some Text</div>

$(".infos").each(function(){
    x = $(this).html().length;
    roundValue = Math.round(x/160);
    fontSize = (roundValue>0)?16-roundValue:16;
    $(this).css({"font-size":fontSize});
});

您需要根据需要进行修改。

DEMO

Answer 2

如果您可以将图像作为背景（css属性），则可以使用隐藏和显示来隐藏或显示悬停列表，并使用溢出...

我为你做了一个小提琴，带有一个虚拟图像，但它应该可以做到这一点......让我知道这是否是你想要实现的......

jsfiddle.net/mk5Tb/1 /

如何在框中添加更多内容

2 个答案: