YouTube iframe在同一行上的图片,文字和链接展示位置

时间:2011-09-02 02:40:17

标签: html css

我已经设置了此页面,我正在尝试将YouTube视频和一些带有链接和文本的图像排在同一行。我有一个jsfiddle设置,所以你可以看到我的代码和诸如此类的东西:jsFiddle

这就是我希望它基本上看起来的样子: enter image description here

我想要绿色的“订阅”按钮进入空白框中的绿色以及带有红色框的图像链接进入红色框空白区域。

在jsFiddle上,YouTube视频有点大小,然后在此屏幕截图中,但除非有必要,否则不要担心。

对于那些宁愿看到网页样本的实时版本而不是jsFiddle小预览的人,这里有一个链接:Test Live Page

1 个答案:

答案 0 :(得分:0)

这是你在找什么? http://jsfiddle.net/9xQe7/

这就是我的所作所为:

  1. 将图片链接和“订阅”链接包装在包装div(video-info)中并将其浮动到右侧
  2. 从包含图片链接的div中删除了边距
  3. video-info添加了一些包含一些内容的div,以显示可以添加额外内容
  4. 将较低的文字换成div(video-desc)并添加clear: both以使该文字与上述元素分开
  5. 如果我们需要添加/更改以获得您想要的内容,请告诉我。