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

Question

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

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

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

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

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

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

Answer 1

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

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

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

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

Edit 2: Я не двигался facebook вещи обратно влево

Answer 2

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

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

Я надеюсь, что это поможет вам.

ps: для видео различной ширины, я думаю, что лучший способ - обнаружить его с помощью javascript, а затем установить ширину h4.caption соответственно. Вы можете сделать это с относительной легкостью через пакет размеров jquery. Чтобы сделать это из коробки с простым html/css, я не знаю;)

Answer 3

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

<div class="innerframe"> 
<iframe width="640" height="480" src="http://www.youtube.com/embed/D35uQCtr4EY" frameborder="0" allowfullscreen class="frame"></iframe> 
<h4 class="caption"><a>Watch more videos on our YouTube Channel</a></h4> 
</div> 

, а затем CSS просто

.innerframe { 
width:640px; 
margin-left: auto; 
margin-right: auto; 
} 

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