css - 股息 float 和负 margin

Question

我希望这是一个简单的，但我似乎无法快速破解它......

我有一个 2 列布局，右列中的内容是动态的和 ajax 驱动的。因此，页面高度会根据右栏中的内容而变化。

我想将一个小的 Flash 文件 (400px x 200px) 固定在页面底部，但在第 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;>
		<object>Flash file</object>
	</div>
</div>

我已经大大简化了代码，但您应该明白我的意思。简单的 2 列，清除列，在 flash div 上设置负边距。在 IE6、Safari 中运行良好，在 Opera、Firefox 和 Chrome 中严重失败。

您能否“通过”清除应用负边距？

感谢所有帮助；)

Answer 1

给你:

<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 对象和背景颜色，它们只是为了在我试图了解发生了什么时让问题更清楚。