2014-02-13 5 views
-2

Мне сложно справляться с требованиями клиентов. Существует довольно маленькая коробка (230px x 200px), содержащая изображение, которое будет наложено списком при наведении. Теперь клиент хочет иметь еще несколько элементов в списке, чем будет в коробке. Но прокрутка на оверлей просто не кажется правильным, поэтому мне нужно другое дизайнерское решение.Как разместить больше содержимого в ящике

Я знаю, что это не хардкорный вопрос программирования, но я полагаюсь на знания сообщества о прохладных js/css-хаках и плагинах, которые могут решить мою проблему.

+0

положить URL сайта здесь или любой снимок экрана –

+0

Как насчет того, чтобы «показать следующий X», но т? Или организовать его на страницу? – timo

+1

Или просто скажите своему клиенту, что он не подходит;) – putvande

ответ

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

0

Если вы можете поместить изображение в качестве фона (свойство CSS) вы можете использовать скрыть и показать, чтобы скрыть или отобразить список на парении, и использовать переполнение ...

Я сделал скрипку для вас, с фиктивным изображением, но он должен сделать трюк ... Дайте мне знать, если это то, что вы хотите достичь ...

jsfiddle.net/mk5Tb/1/

Смежные вопросы