0

我正在设计一个网站，它有一个半透明的内容容器，分为两列。我的 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 上发布新闻。如果我在 main 的 iframe 中嵌入视频，则内容（以及投影）的半透明背景不会呈现。如果您想在 iframe 上覆盖 div，我发现了很多解决方案，但没有任何关于将 iframe 放入 div 容器中来破坏该容器的样式。

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

4

3 回答 3

1

我不是 100% 确定它背后的原因，但是如果您将 display:inline-block 添加到您的内容样式中，它似乎对我有用

于 2013-01-19T05:40:11.973 回答
1

试试这个...

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-01-19T06:24:04.903 回答
1

我注意到我<a href="blah" />在 HTML 中使用各种语句引起的一些奇怪行为。我的印象<[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内容样式。

谢谢你的帮助。

于 2013-01-19T19:02:12.520 回答