Div浮动和负边距

Question

我希望这是一个简单的问题，但我似乎不能很快解决它...

我的页面有两列布局，右侧列中的内容是动态的，并且由ajax控制。因此，页面高度会根据右侧列的内容而变化。

我想在页面底部添加一个小的Flash文件（400px x 200px），但是要放在第1列下面。

这很容易实现。问题是..我想让Flash文件的顶端边距为负200像素，这样它就不会被孤立出来了。这也减少了浪费的空白空间。

<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>

我已经简化了代码，但你应该明白我的意思。简单的两列布局，清除列，给flash div加上负边距。在IE6和Safari中运行良好，在Opera、Firefox和Chrome中失败了。

你能否在清除时应用负边距？

非常感谢您的帮助;)

- MrFidge

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

- Peter Horne

---

"绝对定位"可以解决这个示例的问题，但如果在实际文档中跟随Flash对象的其他内容会导致问题。这些内容将与不保留自身空间的绝对定位的对象冲突。 - buti-oxa

谢谢:D 这个在我的代码上很好用。Flash也是包含div中的最后一个对象，所以它不会破坏页面。 - MrFidge

由于Flash对象具有固定大小，因此您可以简单地添加一个margin-top，其值等于.swf文件的高度。 - Peter Horne

Answer 2

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

- Emily

Answer 3

可以的。负边距将使您的 Flash 容器 div 移到那里。问题在于，其内容应如何表现。

我猜，如果您用长文本替换 Flash 对象，您会发现文本虽然从"那里"开始，但仍绕过浮动。

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

- buti-oxa