Question

这是我的网站：http://oldtimesdaily.tumblr.com/

我现在正在使用tumblr发布图片和视频。不幸的是，使用“照片”和“视频”选项将不允许我输入任何标题，因此我使用“文本”选项而只是嵌入图片和视频。

现在的问题是嵌入的YouTube视频没有与图片对齐。我放置50px左边距的我的图片完美排列，但我如何对YouTube视频做同样的事情？这是CSS代码：

.Post {

        /*    background: url('http://s23.postimg.org/5fvqrgozv/Post2.png') repeat-y center top; */
             background-color: white;     

            width:1000px; /* editable */ 
            margin: 0px 0px 0px; /* test*/
            line-height: 1.4; 
            }

            .Post img {

                margin: 0px 50px 50px 70px;  /* editable */         
                max-width: 100%;
                -webkit-box-shadow: #444 0px 0px 6px;
                -moz-box-shadow:    #444 0px 0px 6px;
                {block:PermalinkPage} 
                  width: 625px;
                {/block:PermalinkPage} /*editable

{block：Post} {块：帖子}

            {block:Text}
              {block:IndexPage}

             <div id="postlinks">
             <div class="fb-like" data-href="{ShortURL}" data-send="false" data-layout="box_count" data-width="100" data-show-faces="true" data-font="arial">

              </div>
              </div>
              {/block:IndexPage}

               <div class="Text">
                {block:Title}
                <a href="{Permalink}" target="_blank" class="Title">{Title}</a> 

                {/block:Title}

                <div class="PostBody">{Body}</div>
            </div>


            {/block:Text}

Answer 1

您可以将iframe-tag添加到img的css规则中，如下所示：

.Post img, iframe {

            margin: 0px 50px 50px 70px;  /* editable */         
            max-width: 100%;
            -webkit-box-shadow: #444 0px 0px 6px;
            -moz-box-shadow:    #444 0px 0px 6px;
            {block:PermalinkPage} 
              width: 625px;
            {/block:PermalinkPage} /*editable

此处显示的示例： http://i.imgur.com/YTPg9p8.png

更改嵌入式YouTube视频的CSS

1 个答案: