Html Iframe隐藏容器的样式

我正在设计一个网站，它有一个半透明的内容容器，分为两列。我的CSS：

#content {
  width: 80%; margin-left: 10%; margin-top: 25px; margin-bottom: 25px;
  background-color: rgba(256,256,256,.6); box-shadow: 0 0 6px}

#sidebox {
  width: 25%; padding-left: 2.5%; padding-right: 2.5%; float: right; 
  background-color: #FFF}

#main {
  width: 65%; padding-left: 2.5%; padding-right: 2.5%; float: left}

用于嵌入视频的HTML：

<div id="content">

  <div id="sidebox">...</div>

  <div id="main">
    <div class="post">
      <a name="song" />
      <p class="title">New song!</p>
      <p class="date">Posted January 16, 2013</p>
      <center>
  <iframe width="480" height="360"
     src="http://www.youtube.com/embed/tF7DQBlYQGM"
     frameborder="0" allowfullscreen style="margin-left: -3%" />
      </center>
    </div>
  </div>
</div>

...
我不能100%确定其背后的原因，但如果您将display:inline block添加到内容样式中，它似乎对我的端起作用
我不能100%确定其背后的原因，但如果您将display:inline block添加到内容样式中，它似乎对我的端起作用
试试这个

html内容：

<div id="content">
<p> content div </p>
 <div id="sidebox">...</div>
    <div id="main">
        <div class="post">
        <p> main div </p>
            <a name="song" />
            <p class="title">New song!</p>
            <p class="date">Posted January 16, 2013</p>
            <center>
                <iframe width="480" height="360"
                src="http://www.youtube.com/embed/tF7DQBlYQGM"
                frameborder="0" allowfullscreen style="margin-left: -3%" />
            </center>
    </div>
  </div>
 </div>


内容部

...
主要部门

新歌
2013年1月16日发布

试试这个

html内容：

<div id="content">
<p> content div </p>
 <div id="sidebox">...</div>
    <div id="main">
        <div class="post">
        <p> main div </p>
            <a name="song" />
            <p class="title">New song!</p>
            <p class="date">Posted January 16, 2013</p>
            <center>
                <iframe width="480" height="360"
                src="http://www.youtube.com/embed/tF7DQBlYQGM"
                frameborder="0" allowfullscreen style="margin-left: -3%" />
            </center>
    </div>
  </div>
 </div>


内容部

...
主要部门

新歌
2013年1月16日发布

我注意到在HTML中使用
类语句时出现了一些奇怪的行为。我的印象是
与
相同，它只是一个不包含任何其他内容的元素的简写。然而，我不知道这是不是真的，我发现大量文本意外地被移动到
元素中。因此我改变了

<iframe width="480" height="360" src="http://www.youtube.com/embed/tF7DQBlYQGM"
frameborder="0" allowfullscreen style="margin-left: -3%" />`

`

到



所有这些似乎都显示正确。我甚至不再需要内容样式中的
display:inline block

谢谢你的帮助。
我注意到在HTML中使用
类语句时出现了一些奇怪的行为。我的印象是
与
相同，它只是一个不包含任何其他内容的元素的简写。然而，我不知道这是不是真的，我发现大量文本意外地被移动到
元素中。因此我改变了

<iframe width="480" height="360" src="http://www.youtube.com/embed/tF7DQBlYQGM"
frameborder="0" allowfullscreen style="margin-left: -3%" />`

`

到



所有这些似乎都显示正确。我甚至不再需要内容样式中的
display:inline block

感谢您的帮助。
当我尝试此操作时，“content div”落在容器中，但主div和侧框都位于容器下方，而不是容器中。“我的代码”在main和sidebox div之后还有一个
，因此容器将包含这两个div。不过，这似乎没有什么关系，因为它在不包含视频时工作正常，而在包含视频时没有任何作用。当我尝试此操作时，“content div”落在容器中，但主div和sidebox都位于容器下方，而不是容器中。“我的代码”在main和sidebox div之后还有一个
，因此容器将包含这两个div。不过，这似乎没有什么关系，因为它在不包含视频时工作正常，而在包含视频时则不起任何作用。这几乎可以正常工作。当我将其添加到内容样式中时，iframe似乎是在容器中设置的，但实际上是从文档流中删除的，因此后续文本或div最终被放置在iframe下。我尝试在iframe之后立即包含一个div，其中包含
clear:left
和
clear:both
，但这两个选项似乎都不起作用。当然，我可以添加一个大的顶部边距来强制流看起来正确，但这不是一个优雅的解决方案。实际上，添加顶部边距对我不起作用。一旦我放置了视频，似乎所有后续内容都消失了。这几乎可以正常工作。当我将其添加到内容样式中时，iframe似乎是在容器中设置的，但实际上是从文档流中删除的，因此后续文本或div最终被放置在iframe下。我尝试在iframe之后立即包含一个div，其中包含
clear:left
和
clear:both
，但这两个选项似乎都不起作用。当然，我可以添加一个大的顶部边距来强制流看起来正确，但这不是一个优雅的解决方案。实际上，添加顶部边距对我不起作用。一旦我放置了视频，似乎所有后续内容都消失了。