如何在框中添加更多内容

时间:2014-02-13 09:18:02

标签: javascript jquery html css

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

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

2 个答案:

答案 0 :(得分:0)

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

否则,如果你真的想从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

答案 1 :(得分:0)

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

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

jsfiddle.net/mk5Tb/1 /