Div 浮动 & 负边际

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

Answer 2

是的你可以。 负边距会将您的 Flash 容器 div 放在那里。 问题是，它的内容应该如何表现。

我猜想，如果您用长文本替换 Flash 对象，您会看到文本在“向上”开始时仍然环绕浮动。

尝试用 margin-bottom 替换 padding-bottom 或更改 Flash 对象元素的显示属性。

Answer 3

将两列包裹在一个 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>