css - 将文本右对齐到嵌入媒体的边缘

Question

我需要一些文本显示在嵌入媒体(在本例中为视频)下方，我希望文本与视频右对齐。

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

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

这是我目前所拥有的 fiddle http://jsfiddle.net/thwackukulele/2N6a9/

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

感谢您的帮助!

Answer 1

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

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

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

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

编辑 2:我没有将 facebook 的东西移回左边