0

2 つの列に分割されたコンテンツ用の半透明のコンテナーを持つサイトを設計しています。私の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コンテナーに入れてそのコンテナーのスタイリングを台無しにすることについては何も見つかりませんでした。

現在ビデオが埋め込まれている Web サイト: 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 に答える