2011-02-01 103 views
0

我有三个浮动,我需要它在三个div,导致顶部浮动动态像youtube扩大视频选项。无论如何三个浮动,两个在左边,一个在右边,右边的浮动只在第二个浮动右边,但是不会在上面移动更多。css 3浮动问题

<center> 
<div style="width: 1024px;"> 
    <div style="width: 100%;"> 
     header content here.. 
    </div> 
    <div class="clear"></div> 
    <div style="width: 630px; float: left"> 
     video here... right float should show next to this box, sence this is below the header... 
    </div> 

    <div style="width: 630px; float: left"> 
     comments here and other options... 
    </div> 

    <div style="width: 230px; float: right"> 
     related videos here.. (this box goes above and touchs the comment area only, but does not go all the way up to video area, what im doing wrong? btw i cant put comment and video in same div, because of some dynamic feature. 
    </div> 
</div> 
<center> 

注:我不能改变的div订单...

+0

什么是“正确的浮动只是那张第二浮动权,但不会把更多上面说”意思? – sdleihssirhc 2011-02-01 22:44:43

回答

1
<center> 

    <div id="wrap" style="width: 1024px;position:relative;"> 

     <div id="header" style="width: 100%;"> 
     header content here..  header content here..  header content here..  header content here..  header content here..  header content here..  header content here..  header content here..  header content here..  header content here..  header content here..  header content here..  header content here..  header content here..  header content here..  header content here..  header content here..  header content here..  header content here..  header content here..  header content here..  header content here..  header content here..  header content here..  header content here..  header content here..  header content here..  header content here..  header content here..  header content here.. 
     </div> <!-- END OF id=header--> 

     <div class="clear"></div> 

     <div id="leftColumn" style="width: 630px; float: left;"> 

      <div id="video"> 
       video here... 
      </div> 

      <div id="comments"> 
       comments here and other options... 
      </div> 

     </div> <!-- END OF id=leftColumn--> 

     <div id="rightColumn" style="width: 230px; float: right;"> 
     related videos here.. (this box goes above and touchs the comment area only, but does not go all the way up to video area, what im doing wrong? btw i cant put comment and video in same div, because of some dynamic feature. 
     </div> <!-- END OF id=rightColumn--> 

    </div> <!-- END OF id=wrap--> 

</center> 

http://jsfiddle.net/borayeris/tDdvA/