股利浮動與切緣陰性

我希望這是一個簡單的，但我不能似乎能夠迅速破解它...股利浮動與切緣陰性

我有一個2列布局，在內容右欄是動態的並且是ajax驅動的。因此，頁面高度根據右列中的內容而變化。

我想有一個小的Flash文件（400像素X 200像素）狂奔到頁面的底部，而是列1.

下這很容易。問題是..我希望閃光燈有一個-200px的負頂部邊距，所以它不會自行解決。這也減少了浪費的空白。

<div id="container"> 
 
    <div id="col_1" style="float:left; padding-bottom:200px;">Some static content</div> 
 
    <div id="col_2" style="float:left">AJAX content</div> 
 

 
    <div style="clear:left"></div> 
 

 
    <div id="flash_container" style="margin-top:-200px;> 
 
\t \t <object>Flash file</object> 
 
\t </div> 
 
</div>

我已經簡化了代碼相當多，但你應該明白我的意思。簡單的2列，清除列，在閃存div上留下負餘量。在IE6，Safari中運行良好，在Opera，Firefox和Chrome中失敗。

你可以申請「到」明確陰性切緣？

所有幫助表示讚賞;）

來源

2009-07-23 MrFidge

在這裏你去：

<div id="container" style="position: relative;"> 
 
    <div id="col_1" style="float:left; padding-bottom:200px; background-color: #235124;">Some static content<br />Another line</div> 
 
    <div id="col_2" style="float:left">AJAX content</div> 
 

 
    <div style="clear:left"></div> 
 

 
    <div id="flash_container" style="margin-top: -200px; position: absolute;"> 
 
    <object> 
 
     <param name="movie" value="boxheadrooms.swf"> 
 
     <embed src="boxheadrooms.swf" width="550" height="400"> 
 
     </embed> 
 
    </object> 
 
    </div> 
 
</div>

需要一個額外的div來包裝這一切，但它需要啓用的相對位置。

忽略額外的標籤，Flash對象和背景顏色我說，他們只是爲了使問題更清楚我，當我試圖瞭解發生了什麼事。

來源

2009-07-23 14:51:07

絕對定位「解決」貼子的例子，但如果在真實文檔中存在跟隨flash對象的內容，會導致麻煩。該內容將與絕對定位的對象發生衝突，該對象不會爲其自身保留任何空間。 – 2009-07-23 15:24:05

是的，你可以。負邊距將把你的閃存容器div放在那裏。問題是，它的內容應該如何表現。

我想，如果要更換長文本的Flash對象，你會看到文本，同時啓動「那裏」，仍然圍繞着花車包裝。

嘗試用邊距或更改flash對象元件的顯示屬性替換填充底部。

來源

2009-07-23 15:08:33

包裹在一個div兩列，並使用overflow:hidden清除浮動。使用clear:both和position:relative讓Flash div移動到左側並覆蓋兩列。

我添加了背景顏色和高度，所以我可以看到的div放置。

<div id="container"> 
     <div style="overflow:hidden;"> 
      <div id="col_1" style="float:left; padding-bottom:200px;background-color:#c00;">Some static content</div> 
      <div id="col_2" style="float:left;height:300px;background-color:#0c0;">AJAX content</div> 
     </div> 

     <div id="flash_container" style="margin-top:-200px;position:relative;clear:both;background-color:#ccc;height:100px;"> 
      <object>Flash file</object> 
     </div> 
    </div>

來源

2009-07-23 15:15:16 Emily

股利浮動與切緣陰性

回答

相關問題