我正在尝试使用 CSS 在文本 block 中创建标注(例如 block 引号或相关图片)。它必须可以使用 Javascript 进行操作并且可以与 CMS 一起使用，所以我不能只是将标注嵌入文本 block 的中间并使其 float 。相反，标注位于文本 block 的顶部，我使用一定高度的 pusher div 将其向下移动到所需位置。
当所有标注都位于文本 block 的同一侧时，此技术非常有效。问题是当我想要在每一侧标注时。第一个 pusher div 将第二个 pusher div 向下推，即使它们 float 到不同的侧面并且都具有非常小的设置宽度。
这是问题的一个例子。插入器 div(通常 0px 厚且透明)是侧面的红色条。它们都应该从 block 的顶部开始，就在标题下面。如您所见(至少如果您使用的是 Webkite/Gecko，我还没有尝试过其他任何东西)，右侧的栏从左侧栏的下方开始。
http://keaton.ws/Files/theCalloutProblem.html
我试过尝试使用 HTML 的结构(将推送器和标注从其父 div 中取出)并更改几乎所有内容的显示属性，但没有任何效果。我所做的大部分更改导致文本未正确换行。我知道这是一个相当晦涩的问题，但我们将不胜感激任何帮助。
-基顿
这是代码，内联样式:
<!DOCTYPE html>
<html>
<head></head>
<body>
<div style="width:750px; margin:0 auto;">
<div style="width:750px;text-align:center;"><h1>This is the header</h1></div>
<!-- Left Callout -->
<div>
<div style="width:0px;float:left;height:100px;"></div>
<div style="width:200px;float:left;clear:left;"><!-- Callout Text --></div>
</div>
<!-- Right Callout -->
<div>
<div style="width:0px;float:right;height:250px;"></div>
<div style="width:200px;float:right;clear:right;"><!-- Callout Text --></div>
</div>
<div style="width:700px; margin: 0 auto;">
<!-- Body Text -->
</div>
</div>
</body>
</html>
最佳答案
在这些示例中，交替的左/右浮动始终具有相同的高度。
http://meyerweb.com/eric/css/edge/slantastic/holiday.html http://meyerweb.com/eric/css/edge/slantastic/demo2.html(<--为什么这个链接无法点击？) http://csstextwrap.com/#export
看来你必须按高度/位置对 float 进行排序才能达到预期的效果:
关于html - float 到两侧的 CSS 标注流动不正确，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11125636/