将 DIV 格式化到 FLOAT LEFT 右侧的填充和列表问题

Question

我有一个难题。我有一个应用程序，其中 CSS 似乎做了它应该做的事情，但没有像你期望的那样显示结果，我找不到获得“预期”结果的解决方案。问题是当内容左侧有一个浮动元素并且内容样式使用填充或边距时，内容如何流动。

在我的应用程序中，用户可以在 DIV 中输入文本。可能有也可能没有浮动左元素，因此带有文本的 div 可以位于正文区域的左侧或向右移动（即在浮动元素之后）。

当没有浮动元素时，文本可以与左、缩进、首行缩进或悬挂的段落（即带有 div 和适当的类）一起使用。

段落的 CSS 是：

.firstindent { text-indent:30px; }
.indent { padding-left:30px; }
.hanging { padding-left:30px; text-indent:-30px; }

但是，当添加一个左浮动元素时，只有标准缩进和第一个缩进可以正确显示。这是因为填充、边框和边距在盒子模型“内容”之外，并且只有“内容”区域中的项目会针对浮动进行调整。

浮动。在浮动模型中，首先按照正常流程布局一个盒子，然后>从流程中取出并尽可能向左或向右移动。内容可能 沿着浮子的一侧流动。

如果你使用 Firefox 和 Firebug，你可以突出显示 div，你会发现填充显示在左边缘，即浮动元素的“下方”，而不是调整到浮动元素的右侧。

因此，带有浮动左元素的段落看起来像这样：

（请注意，浮动元素也会影响列表的显示。）

到目前为止，我还没有想出一个 CSS 解决方案来让我设置主要文本内容，然后让它们正确显示左侧是否有浮动左侧元素。

我已经发布了一个完整的 HTML 示例，所以请随时获取源代码，看看是否能找到解决方案！ Sample Page

谢谢 - 我应该包括“你所期望的”。这里是浮动左侧和浮动左侧垫片。

Answer 1

要更正，请在所有段落元素（和列表等）上设置overflow: hiddenSee fiddle。