Question

所以我在图像旁边有一个段落文本，对于默认的计算机屏幕我理想地想要图像高度的大小以防止文本环绕它，所以我有时会调整jpeg以便周围有更大的空间它

然后有时我会在屏幕截图中显示一个我想要居中的嵌入式视频。

如果没有足够的文字，那么如果我嵌入一个视频只会集中在上面文字的宽度而不是整个屏幕上，那就麻烦了，如

所示

如果有太多的文字，所以它的流程未定义图像，那么事情继续正常工作，问题是当这还不够时。困难在于没有完美的图像/文本设置，因为它会随着屏幕的变化而改变，而且对于翻译的页面，翻译文本的长度会有所不同，我不想修改每种语言的图像边框。我遇到的问题是我总是希望视频居中，无论我如何确保这一点。

这是示例html

<div class="Section">
<img src="http://www.jthink.net/songkong/images/classical.png" class="section_image align_left"/>
<h2>Understands Classical</h2>
<p>SongKong understands Classical music. The Metadata demands for Classical are very different to Pop/Rock music, credit is usually given to not only the performer but also the
conductor, orchestra and composer. In Pop/Rock an album usually represents the artistic intent of the artist, i.e. the album was conceived
and created as a single body of work. In Classical it is more complicated, Classical composers work in terms of Symphonies or Sonatas
rather than albums, we call these Works. These works comprise sub works or movements, and there may be additional levels. When Classical music is released as an album it may only contain part of a
work, or conversely multiple works, so the album grouping may not be the most important grouping.
SongKong identifies Classical releases and captures this additional information in dedicated metadata fields.
It can also identify other Classical information such as the Opus No and the performers with their instruments. SongKong can automtically update the new iTunes Work and Movement fields.
</p>
<div class="videowrapper">
<iframe src="https://www.youtube.com/embed/6Es-eaG4xPg" name="Classical and iTunes" allowfullscreen></iframe>
</div>
</div>

和CSS

 .section_image {
        height: auto;
    }
    .Section {
            clear:both;
            padding-top:50px;
            padding-bottom:50px;
    }

    .align_left {
        float:left;
        margin-right:20px;
        clear:both;
    }

    .align_right {
        float:right;
        margin-left:20px;
        clear:both;
    }

  .videowrapper iframe {
        margin: 0 auto;
        display:table;
        width: 500px;
        height: 300px;
    }

Answer 1

试试这个：

<div class="Section">
<img src="http://www.jthink.net/songkong/images/classical.png" class="section_image align_left"/>
<h2>Understands Classical</h2>
<p>SongKong understands Classical music. The Metadata demands for Classical are very different to Pop/Rock music, credit is usually given to not only the performer but also the
conductor, orchestra and composer. In Pop/Rock an album usually represents the artistic intent of the artist, i.e. the album was conceived
and created as a single body of work. In Classical it is more complicated, Classical composers work in terms of Symphonies or Sonatas
rather than albums, we call these Works. These works comprise sub works or movements, and there may be additional levels. When Classical music is released as an album it may only contain part of a
work, or conversely multiple works, so the album grouping may not be the most important grouping.
SongKong identifies Classical releases and captures this additional information in dedicated metadata fields.
It can also identify other Classical information such as the Opus No and the performers with their instruments. SongKong can automtically update the new iTunes Work and Movement fields.
</p>
<div class="clear-fix"></div>
<div class="videowrapper">
<iframe src="https://www.youtube.com/embed/6Es-eaG4xPg" name="Classical and iTunes" allowfullscreen></iframe>
</div>
</div>


.section_image {
        height: auto;
    }
    .Section {
            clear:both;
            padding-top:50px;
            padding-bottom:50px;
    }

    .align_left {
        float:left;
        margin-right:20px;
        clear:both;
    }

    .align_right {
        float:right;
        margin-left:20px;
        clear:both;
    }

  .videowrapper iframe {
        margin: 0 auto;
        display:table;
        width: 500px;
        height: 300px;
    }

    .clear-fix {
      clear: both;
    }

实例https://jsfiddle.net/h26quu5f/

在html5中，如何确保两个图像始终位于

1 个答案: