0

我需要一些文本出现在嵌入式媒体（在本例中为视频）下方，并且我希望文本与视频右对齐。

我不知道该怎么做，因为布局需要流畅。有些视频会比其他视频更宽。

目前，文本与包装 div 右对齐。

这是我到目前为止所拥有的一个小提琴http://jsfiddle.net/thwackukulele/2N6a9/

我希望文本“在我们的 YouTube 频道上观看更多视频”与视频的右边缘对齐。

谢谢你的帮助！

4

3 回答 3

0

http://jsfiddle.net/RPTgB/ 我认为这就是你要找的。我刚刚制作了一个 .innerframe 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;
}

希望这就是你要找的。

于 2012-03-07T21:44:57.357 回答
0

如果您希望文本位于视频下方，但与视频的右边缘对齐，请将 <h4 class="caption"> 元素放在“framewrap”元素中，然后应用以下样式：

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

我希望这可以帮助你。

ps：对于不同宽度的视频，我认为最好的方法是用javascript检测它，然后相应地设置h4.caption的宽度。您可以通过 jquery 尺寸包相对轻松地做到这一点。要使用纯 html / css 开箱即用地做到这一点，我缺乏知识；）

于 2012-03-07T21:33:23.907 回答
0

视频可以有不同的宽度，但它们永远不会比您在内容单元上设置的 960 像素宽？

如果 content-unit 使所有内容居中，则将 framewrap 设置为 inline-block。这将使其收缩包装到它的内容（这里是视频），如果 content-unit 设置了 text-align: center ，那么 inline-block framewrap 将居中（无论宽度如何）。现在，因为它的宽度被限制为最宽的内容（这里的 iframe，一个内联元素），所以 h4 可以设置为 text-align right 并且文本应该限制在 framewrap 的右侧，因为块 h4 仍然会扩展至任何 framewrap 的 100%。

啊，你在那里有很多定位和边距，我看不到他们在做什么，所以我不希望这段代码真的能解决你的问题，但是......查看 JSFiddle 就像通过屏幕放大镜查看. 有趣的东西http://jsfiddle.net/2N6a9/2/我将 content-unit 蓝色和 framewrap 红色，这样你就可以看到标题是如何被包裹的。如果您想将文本稍微向左移动一点，您可以在 h4 上添加一点右填充。

哦，我没有为 IE6,7 等添加代码。如果您支持它们，请记住在 inline-block 声明之后将 framewrap 设置为 display: inline。

编辑 2：我没有将 facebook 的东西移到左边

于 2012-03-07T21:35:41.823 回答