8

我的基本布局是这样的： 

<table>
...
</table>
<table>
...
</table> // There's actually five tables, but that's irrelevant
<img .../>
</body>

我正在尝试将图像变成页脚，在所有表格下方，但我能做到的最好的办法是它卡在表格的右侧（我的屏幕很大，所以它可能会在表格下方为您环绕，但不适合我）或者我可以使用 position:absolute 让它漂浮在桌子的正上方。我一辈子都无法将图像强行包裹在桌子下面。

我尝试将图像包装在一个 div 中，并将各种属性/属性组合添加到 div 中，但就像我说的那样，它们都会产生上面列出的两个坏结果之一。

谁能提供某种解决方案？

我已经看到了其他一些 SO 问题，例如如何强制 div 出现在下面而不是紧挨着另一个？，但我根本不理解该解决方案（ float:left 如何强制某些东西低于其他东西？）而且我也不相信该解决方案需要额外的 wrapper <div>。

4

4 回答 4

11 
<div>
<table>
...
</table>
<table>
...
</table>

</div>
<div style="clear:both;">
<img .../>
</div>

</body>

或使用 css。并为 img 或 div 标签创建样式。

于 2012-08-01T17:53:51.633 回答
9

在包含表格的最后一个 div 之后，只需添加：

<div style="clear:both"></div>

它有效:) 您的 div 正在使用，float: left因此您必须放置一个 div 告诉它停止所有这些浮动！

于 2012-08-01T17:53:27.207 回答
4

将以下样式应用于图像。

<img style="display:block;clear:both;" .../>
于 2012-08-01T17:53:35.303 回答
2

你可以用css来做。为您的图像添加一个类，然后将其更改为阻止或清除浮动。例如，

HTML：

<img src="" class="my-img" />

CSS：

.my-img
{
display:block;
/*Or*/
clear:both;
}
于 2012-08-01T17:52:39.110 回答