1

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

当所有标注都在文本块的同一侧时，此技术非常有效。问题是当我想要在每一侧进行标注时。第一个推动器 div 将第二个推动器 div 向下推动，即使它们浮动到不同的侧面并且都具有非常小的设置宽度。

这是问题的一个例子。推动器 div（通常为 0px 厚且透明）是侧面的红色条。它们都应该从块的顶部开始，就在标题下方。如您所见（至少如果您使用 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>
4

1 回答 1

0

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

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

看来您必须按高度/位置对浮点数进行排序才能达到预期的效果：

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

于 2012-06-20T20:21:11.570 回答