тройная подпись над изображением плохо работает

У меня проблема. Я попытался разместить заголовок над изображением

  • первое название (cat1) может быть маленьким или длинным
  • второй титул (cat 2) juste после первого заголовка
  • третий заголовок (после 2-го справа) этот заголовок должен быть встроен

см. мою демонстрацию jsfiddle http://jsfiddle.net/cyphos/jntea/]

Благодарю за ваш ответ


css caption
person cyphos    schedule 22.07.2013    source источник
comment
Если бы вы могли добавить изображение того, чего именно вы хотите достичь, это было бы полезно. В настоящее время не совсем понимаю.   -  person robooneus    schedule 22.07.2013
comment
нет, я хочу сказать, что я должен поместить второй заголовок по ширине после первого заголовка (margin-right: 2 пикселя, например), а третий заголовок справа над изображением (не на веб-странице)   -  person cyphos    schedule 22.07.2013
comment
Если мой ответ ниже не то, что вы хотите, я все еще не понимаю, что вы описываете. Вместо этого разместите изображение того, как вы хотите, чтобы оно выглядело.   -  person robooneus    schedule 23.07.2013

Ответы (1)


arrow_upward
1
arrow_downward

Насколько я понимаю, то, как вы этого добьетесь, зависит от того, что вы умеете создавать. Если вы можете указать ширину каждого элемента, это не проблема. Затем вы можете просто указать ширину для левого и правого элементов, а затем расположить центральный прямо между ними. Посмотрите на эту скрипку в качестве примера:

Только CSS Fiddle

Для упрощения здесь используется модель рамки и рамки с изменением размера блока. Прочтите это, чтобы получить разъяснения

в основном:

.cta1 {left:0;width:150px;}
.cta2 {left:150px;right:150px;}
.cta3 {right:0;width:150px;}

OR

если вы хотите, чтобы эти элементы были динамическими, вам нужно будет использовать Javascript / jQuery, чтобы получить ширину элементов, а затем соответственно установить свойства left и right центрального элемента. Пример в jQuery

скрипт на основе jQuery

var cat1Width = $('.cat1').width();
cat1Width = cat1Width + 26; //26 being a pixel measure of the padding of the element
$('.cat2').css('left', cat1Width);

При этом вам нужно будет затем добавить значения заполнения в переменную cta1Width, поскольку jQuery не возвращает значение ширины, которое включает заполнение. Либо сделайте это вручную (добавив значение пикселя самостоятельно), либо вы также можете извлечь ширину заполнения с помощью jQuery см. эту ветку для информации

person robooneus    schedule 22.07.2013