4

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

我有一个 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;>
		<object>Flash file</object>
	</div>
</div>

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

您可以“通过”清除应用负边距吗？

所有帮助表示赞赏；）

4

3 回答 3

4

干得好：

<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-23T14:51:07.413 回答
0

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

我猜如果你用长文本替换你的 flash 对象，你会看到文本，虽然从“那里”开始，仍然环绕浮动。

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

于 2009-07-23T15:08:33.953 回答
0

将两列包装在一个 div 中并用于overflow:hidden清除浮动。使用clear:bothandposition: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-23T15:15:16.547 回答