Question

我正在尝试使用CSS在一个文本块中创建标注（用于块引用或相关图片之类的东西）。它必须可以用Javascript操作并与CMS一起使用，所以我不能只将callout嵌入文本块的中间并浮动它。相反，标注位于文本块的顶部，我使用一定高度的推动器div将其向下移动到所需位置。

当所有标注都位于文本块的同一侧时，此技术可以正常工作。问题是当我想在每一侧都有一个标注时。第一个按钮div向下推动第二个推动器，即使它们浮动到不同的侧面并且两个都具有非常小的设定宽度。

以下是问题的一个示例。推动器div（通常为0px厚且透明）是侧面的红色条。它们都应该从块的顶部开始，就在标题下面。正如你所看到的（至少如果你使用的是Webkite / Gecko，我没有尝试过其他任何东西），右边的栏从左边栏开始。

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

我尝试过使用HTML的结构（从他们的父div中取出pusher和callout）并改变几乎所有内容的显示属性，但没有任何效果。我做的大多数更改都会导致文本无法正确包装。我知道这是一个相当模糊的问题，但任何帮助都会非常感激。

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

Answer 1

在这些示例中，交替的左/右浮动总是具有相同的高度。

http://meyerweb.com/eric/css/edge/slantastic/holiday.html http://meyerweb.com/eric/css/edge/slantastic/demo2.html（＆lt; - 为什么这个链接无法点击？） http://csstextwrap.com/#export

似乎你必须按照高度/位置对浮动进行排序才能达到预期的效果：

http://jsfiddle.net/ge5YG/2/

CSS Callouts浮动到双方流量不正确

1 个答案: