-1

私はいくつかの奇妙な問題に遭遇しています。ビデオとテキストの背景となるブラック ボックスを作成しようとしていますが、CSS を入力した後、ブラック ボックスが表示されません。.videoBlock div をコメントとして作成して実験しただけではありません。その中で、.dwBlock div の直後のコードは CSS で動作しないように見えることがわかりました。たとえば、.videoBlock div をコメントとしてマークした後、フッターが消えました。どんな助けでも大歓迎です！どうもありがとう！！ここに私のHTMLがあります:

<div class="wrapOverall">
  <div class="header">
    <div class="navMain">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Contact</a></li>
          <li><a href="#">About</a></li>            
        </ul>
    </div><!--End of navMain-->
  </div><!--End of header-->
  <div class="wrapBlocks">
    <div class="psBlock"></div><!--End of psBlock-->
    <div class="dwBlock"></div><!--End of dwBlock-->
  </div><!--End of Overall block wrap-->
  <div id="videoblock"></div><!--End of videoBlock-->
  <div class="footer">
    <div class="social"></div><!--End of social-->
  </div><!--End of footer-->
</div><!--End of wrapOverall-->

これが私のCSSです：

.wrapOverall {
background:url(images/bg_main.png);
background-repeat:repeat-x;
width:1024px;
height:1024px;
}
.header {
height:176px;
background:url(images/bg_header.png);
background-repeat:repeat-x;
}
.navMain {
}
.wrapBlocks {
margin-top:28px;
}
.psBlock {
height: 235px;
width: 512px;
float:left;
background:url(images/bg_ps.png);
background-repeat:repeat-x;
}
.dwBlock {
height: 235px;
width: 512px;
float:right;
background:url(images/bg_dw.png);
background-repeat:repeat-x;
}
.videoblock {
width: 993px;
height: 348px;
background-color:#000;
}
.footer {
width: 1024px;
height:176px;
background:url(images/bg_header.png);
background-repeat:repeat-x; 
}
4

2 に答える 2

0

float 要素が問題を引き起こしているので、両方とも明確なベースを与えてみてください。

  <div class="wrapBlocks">
    <div class="psBlock"></div><!--End of psBlock-->
    <div class="dwBlock"></div><!--End of dwBlock-->
    <div style='clear:both'></div> <!-- above two float element is causing this issue -->  
  </div>
于 2013-08-15T16:21:03.117 に答える