2011-02-01 268 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/