Question

我正在设计一个内容具有半透明容器的站点，该容器分为两列。我的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>

我在边箱中放了一些静态内容，然后向主要div发布新闻帖。如果我在主屏幕中嵌入iframe中的视频，则内容（以及投影）中的半透明背景不会呈现。我发现了许多解决方案，如果你想在iframe上叠加一个div，但没有关于将iframe放在div容器中搞砸那个容器的样式。

该网站目前已嵌入视频：http://physics.nyu.edu/~dzb212/music_index.html

Answer 1

我不是100％肯定它背后的推理，但是如果你在你的内容风格中添加display：inline-block它似乎在我的最终工作

Answer 2

试试这个......

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>

Answer 3

我注意到在我的HTML中使用<a href="blah" />种语句引起的一些奇怪的行为。我的印象是<[stuff] />与<[stuff]></[stuff]>相同，并且它只是一个方便的简写，对于一个不包含其他内容的元素。但是，我不知道这是否属实，我发现大量文本意外地被移入<a>元素。因此我改变了

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

到

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

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

感谢您的帮助。

iframe隐藏了容器的样式

3 个答案: