выравнивание текста по краю встроенного носителя - PullRequest
Новая
       2

выравнивание текста по краю встроенного носителя

0 голосов
/ 08 марта 2012

Мне нужно, чтобы текст отображался ниже встроенного носителя (в данном случае видео), и я бы хотел, чтобы текст был выровнен по правому краю видео.

Я не уверен, как это сделать, поскольку макет должен быть плавным. Некоторые видео будут шире других.

В настоящее время текст выравнивается по правому краю div.

Вот скрипка с тем, что у меня до сих пор http://jsfiddle.net/thwackukulele/2N6a9/

Мне бы хотелось, чтобы текст "Смотрите больше видео на нашем канале YouTube" соответствовал правому краю видео.

Спасибо за любую помощь!

Ответы [ 3 ]

0 голосов
/ 08 марта 2012

Видео может быть разной ширины, но оно никогда не бывает шире, чем ваш 960px, установленный на блоке контента?

Если блок контента все центрирует, установите для framewrap значение inline-block. Это позволит уменьшить его содержимое (здесь - видео), и если для content-unit установлено значение text-align: center, то рамочный кадр inline-block будет центрирован (при любой ширине, которая окажется ). Теперь, поскольку его ширина ограничена самым широким содержимым (здесь iframe, встроенный элемент), h4 может быть установлен на выравнивание текста вправо, а текст должен быть ограничен правой стороной framewrap, так как блок h4 будет по-прежнему расширить до 100% от того, что такое framewrap.

Ах, у вас много позиционирования и полей, поэтому я не вижу, что они делают, поэтому я не ожидаю, что этот код действительно решит вашу проблему, но ... смотреть на JSFiddle - это все равно что просматривать экранная лупа. Прикольные вещи http://jsfiddle.net/2N6a9/2/ Я сделал синий блок контента и красный рамочный кадр, чтобы вы могли видеть, как заголовок обернут. Вы можете добавить немного правого отступа на h4, если хотите подтолкнуть текст немного левее.

О, я не добавил код для IE6,7 и т. Д. Если вы поддерживаете их, не забудьте установить framewrap для отображения: inline после объявления встроенного блока.

Редактировать 2: Я не переместил материал в Facebook назад влево

0 голосов
/ 08 марта 2012

http://jsfiddle.net/RPTgB/ Я думаю, это то, что вы ищете.Я только что сделал .innerframe DIV и установил поля на auto слева и справа и установил ширину, равную iframe.

Надеюсь, это было то, что вы искали.

0 голосов
/ 08 марта 2012

Если вы хотите, чтобы текст был под видео, но выровнен по правому краю видео, поставьтеэлемента внутри элемента framewrap, а затем примените следующий стиль: 

h4.caption { margin:auto; text-align:right; width:640px }

Надеюсь, это поможет вам в этом.пойти, это обнаружить его с помощью JavaScript, а затем установить ширину h4.caption соответственно.Вы можете сделать это с относительной легкостью через пакет измерений jquery.Чтобы сделать это из коробки с простым HTML / CSS, мне не хватает знаний;)

...