Question

我对wordpress模板有一个非常奇怪的问题。我想像这样彼此放置2个div：

<div style='float:left;'>
    left div
</div>
<div style='float:right'>
    right div
</div>

通常这可以正常工作 - 两个div应该直接相互粘贴 - 但是style.css中的某些东西（使用css reset）会导致右边的div与~5像素重叠左边的div。我搜索了整个.css但是却找不到:(（这只是一个事实，它必须是默认的CSS。

任何人都知道造成这种情况的原因 - 一些修复？

感谢

Answer 1

你divs的任何一个都有宽度吗？给他们一个width，float BOTH left并将margin-right添加到第一个div。

确保您的宽度+边距不会超过周围的div。例如，如果您的周围div为600px，则您的框不应超过左侧div width:290px;和margin-left:20px;。

此外，您可以使用Firebug或任何其他网络开发broswer工具来检查样式表中哪些样式影响您的div。

Answer 2

向左浮动或使用内联块。你也可以将第一个漂浮在左边。

Answer 3

我强烈建议您（如果您还没有）下载FireFox并安装Web Developer Toolbar插件。这个插件非常适合跟踪这样的问题。在您查看具有问题的页面时，在此工具栏的CSS部分下，您可以选择“查看样式信息”。然后只需单击页面上的问题div。在左侧，你会看到一个弹出的小窗口，显示影响这些div的所有样式以及它们来自哪个css源。使用CSS如果你依靠“bug”修复来修复那些不是真正错误的东西，那么在大多数情况下你只会引起更多的麻烦。

Answer 4

我认为问题可能在于您的代码中的部分内容。我可以建议清理花车：

HTML：

<div class="clear"></div>

CSS：

.clear {
     clear: both;
}

你发布的代码可以正常工作，但我希望你有更多的div或容器，或某些东西搞乱它。

Answer 5

总宽度= margin_width + border_width + padding_width +框的宽度+（其他框相同）。

确保为两个浮动设备定义了宽度。最好的方法是通过点击F12来调试代码。您可以使用FireFox，IE，Chrome或Safari，但通常您必须自己启用此选项。

模板问题：浮动的负边距

5 个答案: