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列，清除列，在闪存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容器在那里。问题是，它的内容应该如何表现。

我想如果你用长文本替换你的flash对象，你会看到文本在启动“up there”时仍然包裹浮动。

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

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>

Div float＆amp;负利润率

3 个答案: