无法将DIV移动到另一个DIV下方

时间：2014-07-12 12:34:57

标签： html css

请查看以下代码

HTML 

<div class="main"> 
  <!------------------------ start menu bar ------------------------->
 <div id="apDiv1"><img src="images/only_text.gif"></div>
  <!-- end menu_bar --> 

  <!------------------------ start body_container ------------------------->
  <div class="body_container2">
    <!------------------------ start block_left ------------------------->
    <div class="block_left4" >
      <div class="logo_container">
      <div align="left"><img src="images/only_spiral.gif"></div>
      </div>
    </div>
    <!-- end block_left -->
    <!------------------------ start video_container ------------------------->
    <div class="video_container2">
      <!------------------------ start video ------------------------->
      <div class="video1">
        <video id="example_video_1" class="video-js vjs-default-skin" width="550" height="300" data-setup="{}" poster="http://video-js.zencoder.com/oceans-clip.png" preload="none" controls>
          <source type="video/mp4" src="http://video-js.zencoder.com/oceans-clip.mp4"></source>
          <source type="video/webm" src="http://video-js.zencoder.com/oceans-clip.webm"></source>
          <source type="video/ogg" src="http://video-js.zencoder.com/oceans-clip.ogv"></source>
          <track label="English" srclang="en" src="demo.captions.vtt" kind="captions"></track>
          <!--Tracks need an ending tag thanks to IE9 -->
          <track label="English" srclang="en" src="demo.captions.vtt" kind="subtitles"></track>
          <!--Tracks need an ending tag thanks to IE9 -->
        </video>
      </div>
      <!-- end video -->
      <!------------------------ start div_bottom_video ------------------------->
      <div class="div_bottom_video"> <a href=""><span  id="last2">Menu</span></a> <a href=""><span>Sound</span></a> <a href=""><span>Mail</span></a></div>
      <!-- end div_bottom_video -->
    </div>
    <!-- end video_container -->
    <!------------------------ start presentation_container ------------------------->
    <div class="presentation_container">This is presentation container</div>
    <!-- end presentation_container -->
    <!------------------------ start block_container ------------------------->
    <div class="block_container3">
      <!------------------------ start block1 ------------------------->
      <div class="block1_1">
        <h3>Navigation</h3>
        <ul>
          //CODE REMOVED
        </ul>
        <hr align="center" width="100%" color="#CCCCCC"/>
        <ul>
        <a href="">          </a><a href="">            </a>
        </ul>
      </div>
      <!-- end block1 -->
      <!------------------------ start block2 ------------------------->
      <div class="block2_1">
         <div class="presentation_container">
      <embed  width="590" height="auto" src="test.swf" >
      </embed >
    </div>
      </div>
      <!-- end block2 -->
    </div>
    <!-- end block_container -->
  </div>
  <!-- end body_container --> 
  <!------------------------ start footer ------------------------->
  <div class="footer">
    <div id='cssmenu2'>
      <ul>
       //CODE REMOVED
      </ul>
    </div>
    <p><span id="format">EEE</span> @ 2008 <a href="">privacy policy</a></p>
  </div>
  <!-- end footer --> 
</div>

CSS 

@charset "utf-8";
/* CSS Document */
/* styles on index.html */
h3 {
    color: #609;
}
.main {
    margin-left: auto;
    margin-right: auto;
    height: auto;
    overflow: auto;
    width: 1000px;
    background-image: url(../images/background6.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.body_container2 {
    margin-left: auto;
    margin-right: auto;
    padding: 00px 20px 0px 20px;
    width: 960px;
    height: auto;
    overflow: auto;
    position:relative;
}


/*******************************/

.block_left4 {

    float: left;
    width: 250px;
    padding: 10px 10px 0px 10px;
    height: auto;
    overflow: auto;
    text-align: center;

}
.logo_container {
    height: auto;
    width: auto;
    overflow: auto;
}
/*******************************/

.video_container2 {
    margin-top: 70px;
    width: 550px;   
    height: 350px;
    padding: 20px;
    position:absolute;
    background-color: #FFF;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    -webkit-box-shadow: 0px 0px 12px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 0px 0px 12px 0px rgba(50, 50, 50, 0.75);
    box-shadow: 0px 0px 12px 0px rgba(50, 50, 50, 0.75);
    left: 300px;
    top: 160px;
    overflow:hidden;
}



.video1 {
    width: 550px;
    height: 300px;
    border: solid thin #999;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    text-align: center;
    background-color: #666;
}
.example_video_1 {
    position: absolute;
    z-index: -1;
}
.div_bottom_video {
    width: 100%;
    height: auto;
}
.div_bottom_video span {
    float: right;
    font-family: 'Lato', sans-serif;
    padding-right: 15px;
    padding-left: 15px;
    margin-top: 15px;
    border-right: #CCC thin solid;
    color: #609;
}

/*******************************/
.presentation_container {
    float: right;
    width: 590px;
    padding-top: 20px;
    padding-bottom: 20px;
    overflow: auto;
    height: auto;
}


/*******************************/

.block_container3 {
    background-color: #666;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    float: right;
    clear:both;
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
    height: auto;
    background-color: #FFF;
    overflow: auto;
    -webkit-box-shadow: 0px 0px 12px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 0px 0px 12px 0px rgba(50, 50, 50, 0.75);
    box-shadow: 0px 0px 12px 0px rgba(50, 50, 50, 0.75);

}

.block_container4 {
    background-color: #666;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    float: right;
    clear:both;
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
    height: auto;
    background-color: #FFF;
    overflow: auto;
    -webkit-box-shadow: 0px 0px 12px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 0px 0px 12px 0px rgba(50, 50, 50, 0.75);
    box-shadow: 0px 0px 12px 0px rgba(50, 50, 50, 0.75);

}


.block1 {
    float: right;
    width: 235px;
    padding: 20px;
    overflow: auto;
    height: auto;
    background-color: #FFF;
    clear: both;
    font-family: 'Lato', sans-serif;
}

.block1_1 {
    float: right;
    width: 40%;
    padding: 20px;
    overflow: auto;
    height: auto;
    background-color: #FFF;
    clear: both;
    font-family: 'Lato', sans-serif;
}

.block2 {
    float: right;
    width: 235px;
    padding: 20px;
    overflow: auto;
    height: auto;
    background-color: #FFF;
    font-family: 'Lato', sans-serif;

}

.block2_1 {
    float:left;
    width: 50%;
    padding: 20px;
    overflow: auto;
    height: auto;
    background-color: #FFF;
    font-family: 'Lato', sans-serif;

}
.image_box {
    background-image: url(../images/image4.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    border: solid #333 thin;
    height: 150px;
    width: 100%;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
/*******************************/

/*******************************/

这将提供以下HTML页面

enter image description here

你能看到标有红色矩形的文字This is presentation container吗？实际上，该文字位于DIV内，我希望它位于Navigation部分上方的视频正下方。这是与该DIV相关的HTML代码段

 <!------------------------ start presentation_container ------------------------->
    <div class="presentation_container">This is presentation container</div>
    <!-- end presentation_container -->

我怎样才能实现这一目标？我不是设计师，所以这成了一项艰巨的任务！

1 个答案:

答案 0 :(得分：1)

video_container2 div，您看到的视频具有绝对位置。 这意味着它不计算屏幕上对象的正常浮动。 如果你希望presentation_container低于它，你可以在css中添加一个绝对位置：

.presentation_container {
    position: absolute;
    top: 510px;
    left: 300px;
    width: 590px;
    padding-top: 20px;
    padding-bottom: 20px;
    overflow: auto;
    height: auto;
}
相关问题
最新问题