Тройной заголовок над изображением плохо работает

Question

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

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

посмотрите мое демо jsfiddle http://jsfiddle.net/cyphos/jntea/]

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

Answer 1

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

Только CSS скрипка

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

в принципе:

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

ИЛИ ЖЕ

если вы хотите, чтобы эти элементы были динамическими, вам нужно будет использовать 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. Информацию смотрите в этой теме.