问题标签 [css-float]

我有一个记录管理 Web 应用程序，它在一个屏幕上显示主记录，AJAXes 将编辑器动态构建到编辑器 div 中，我使用 JQuery 使其可拖动。这样可行。

尽管 div 不是一个窗口，但我认为让它更像一个窗口可能是个好主意，所以我编写了一个“关闭”按钮。结构如下所示：

Editorbody 是可变尺寸的，具体取决于人们试图输入的内容。

Draghandle 的宽度设置为编辑器的 100%。Closebutton 在 CSS 中设置为float:right.

我的问题是，在 IE6 和 IE7 中，关闭按钮浮动得太靠右了。无论我将编辑器 div 拖到哪里，它总是靠在窗口的右边缘。在 Firefox 和 Safari 中，它看起来像我预期的那样 - 窗口与 editorbody 一样宽，而 closebutton 位于右上角。

我并不是特别喜欢 float:right，只是想寻找一种方法来设置 CSS，它可以在所有浏览器中为我提供相同的结果。有任何想法吗？

“截图”

这是我想在 jsbin 上做的一个模型（谢谢，redsquare）

示例代码

我正在处理法律敏感信息，因此我无法提供该应用的屏幕截图。然而，我拍了一些照片，把文字和界面挡住了，只留下了窗口结构。

它在 IE7 中的外观

它在 Firefox 3 中的外观

这与简单的 2 列布局不同。

我需要这个html：

div 类菜单具有静态宽度，我需要其中的 div 进入右列，而普通 div 保持原样。

这是我到目前为止得到的 CSS，但我似乎还无法弄清楚：

里面的 div 有随机顺序，所以我不能将它们包含在一个 div 中并浮动它。

这是上面 HTML 代码的粗略草图：

替代文字 http://img102.imageshack.us/img102/4494/flytc3.jpg

我遇到了 Internet Explorer 的演示问题。以下简单的代码块在 Safari、FireFox、Chrome 和 Opera 中呈现我所期望的效果。但是，它会导致IE6 和 IE7 中左右浮动的 DIV 元素之间存在明显的空间。

我的问题是：是否有更正确的方法来实现浮动，以使相同的 CSS 在 IE 和我提到的其他浏览器中都有效？如果没有，摆脱 Internet Explorer 空间的最佳方法是什么？

谢谢，马特

因为这是一个社区维基。我想我会用下面计划 B 提出的解决方案发布工作代码。

我想使用浮动在 CSS 中定位三个项目。

1. 在左上角--标志
2. 在标志的右侧，导航，它是一个无序列表，即向左浮动。
3. 在右上角，2 行注册时事通讯字段 - 复制顶行和表单字段，第二个提交底部

我给了每个它自己的 Div 标签，但看不到让它与 float 一起工作。只有在调整网站大小时看起来不太好的绝对定位。我现在在 div 中放置了一个表格，但我会喜欢一个纯 CSS 解决方案。

我可以让徽标向左浮动，注册字段向右浮动，但似乎无法正确定位导航。要么它一直向左走，要么我把它放在标志和字段下方。

任何建议，将不胜感激。

以下代码在 FF3 中表现出色，但在 IE7 中不起作用。有谁知道如何解决它？

我有一个包含多个图表的页面，格式如下：

每个图表都显示在一个包装器中，float:left并且图表所在的 div 有overflow: auto。这提供了将图表包装到屏幕宽度的所需布局。

我遇到的问题是，在打印模式下，这只打印一页而丢失其余的（第一页也是空白的）。我已经阅读了一点并且理解在大多数情况下解决方案是float:none解决上述问题的应用程序......但是我失去了网格格式并且我想要打印页面上的图表不止一列。

我怎样才能解决这个问题？

我正在使用打印样式表，但这里是屏幕样式：

我有四个div元素浮动到左边。第三个div被清除。
在 Firefox 和 Chrome 中，元素按预期定位：第一个和第二个divs 彼此相邻，并且位于彼此相邻的第三个和第四个divs 之上。
另一方面，IE7 将第四个div与第一个和第二个相邻，div第三个div在下面。

我知道我可以通过br在第二个元素之后添加一个元素来修复它，div但如果我不需要，我宁愿不编辑标记。有没有更优雅的方法来解决问题？

一段时间以来，我一直在尝试在 Google 上进行修复，但还没有找到一个，考虑到这个问题看起来多么简单，这相当令人惊讶。也许我遗漏了一些明显的东西，是否有一个参考站点列出了像这样的简单 CSS 问题，或者我只是对基本 CSS 一无所知？

编辑：在 Nazgulled “解决”问题后，我使示例代码稍微复杂一些（见评论）。现在有四个divs 而不是三个，第三个div被清除而不是第二个。

这是完整的源代码：

这是 Chrome 中的样子：

这是 IE7 中的样子：

每次我尝试在 CSS 中做一些看似简单的事情时，它都不起作用。

我有一个包含 460x160 图像的内容 div。我想要做的就是将图像放在右下角并将我的文字环绕在它周围。

所以我希望它看起来像：

用左上角或右上角的图像做这件事很简单：

现在我该如何把它推到底部？到目前为止，我想出的最好的是：

在这种情况下，文本不会打印在边距中，因此图像上方有空白。

在这种情况下，文本打印在图像上方或下方。

那么......我怎样才能做到这一点？

浮动的 HTML 元素似乎不会扩展其容器的高度。例如，考虑以下代码：

注意灰色背景的包含 div 比红色 div 短，红色 div 延伸到容器边界之外。我希望包含元素扩展到其内容的大小，包括浮动元素。

是否有一个优雅的解决方案来完成这一点，最好是不涉及设置固定高度或使用 JavaScript 的解决方案？

我正在创建一个包含 3 列的网页。中间一栏是所有内容的所在。我要输入的内容必须是左对齐图像的格式，然后是图像旁边的一些文本。这在整个专栏中流动，带有不同的图像和相应的文本。由于我的布局是基于 div 的布局，因此我为该列放置了一个主 div (page_content)。然后标题（h4）和标题下面我输入了另一个div。这个 div 又包含单独的 div，这些 div 嵌套在图像的 div（照片类）和文本的 div（lat_art 类）中。下面给出了 HTML 代码和 CSS 代码。我的问题是第一个图像和文本出现了，但随后在第一个文本下方垂直排列，即仅占据 div 的 50% 并向右浮动，将其对应的文本推到其下方相同的 50% 空间中。我是否应该为单个 div 指定高度，可能图像比文本大。但如果我这样做，我的代码不会变成静态的。我希望它是动态的。请帮忙。

HTML 代码

来自外部样式表的代码