浮动到两边的CSS标注流程不正确

我正在尝试使用CSS在文本块（用于块引用或相关图片之类的内容）中创建标注。它必须可以使用Javascript来操作，并且可以与CMS一起工作，所以我不能将标注嵌入到文本块的中间并将其浮动。相反，标注位于文本块的顶部，我使用一定高度的推动器将其下移到所需的位置。浮动到两边的CSS标注流程不正确

当所有标注位于文本块的同一侧时，此技巧可以很好地工作。问题是当我想在每一面上标注时。第一个推动器div推动第二个推动器，即使它们浮动到不同的侧面并且都具有非常小的设置宽度。

这是一个问题的例子。推杆div（通常为0px厚且透明）是侧面的红色条。他们都应该从顶部开始，位于标题下方。正如你所看到的（至少如果你使用的是Webkite/Gecko，我还没有尝试其他任何东西），右侧的酒吧从左侧的酒吧下面开始。

http://keaton.ws/Files/theCalloutProblem.html

我试着用HTML（以推动并标注出他们的父母DIV）和改变几乎所有的显示属性的结构玩耍，并没有奏效。我所做的大部分更改都会导致文本无法正确包装。我知道这是一个相当模糊的问题，但任何帮助将不胜感激。

-Keaton

下面的代码，以风格在线：

<!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>

来源

2012-06-20 Keaton Brandt