小编dlh*_*dlh的帖子

我正在尝试创建一个编号列表,其中每个li元素包含一个图像和一个文本块.列表编号,图像和文本块应全部沿水平中心线垂直对齐.文本块可以是多行.这是一个非常粗略的例子:

我最接近的是以下内容,它对齐底部的列表编号(在Chrome 15,Firefox 8,IE9中测试).另请参见jsfiddle mockup.

<style type="text/css">
    li div { display: inline-block }
    li div div { display: table-cell; vertical-align: middle }
</style>

<ol>
<li><div><div><img src=widget.png></div><div>Caption Text Here</div></div></li>
</ol>

有没有跨平台的方式来做这个而不自己提供编号？

编辑.还有一个要求:如果容器宽度非常小(例如,在移动设备上查看时),则文本块必须保持在图像的右侧.图像周围不应该有文字包装.

元素的累积offsetTop量<a>和scrollTop导航到该<a>元素后的值之间是否存在可预测的关系？

我天真地认为它们是平等的,但是我遇到了scrollTop更大的情况(滚动位置在页面的下方).

以下更准确地定义问题:

function TotalOffsetTop (e)
{
    var offset = 0;
    do 
        offset += e.offsetTop;
    while (e = e.offsetParent);
    return offset;
}

//navigate to MyBookmark
location.hash = "#MyBookmark"

var BookmarkOffsetTop = TotalOffsetTop(document.getElementByID("MyBookmark"));   
var CurrentPosition = document.getElementsByTagName("body")[0].scrollTop;

if ( CurrentPosition != BookmarkOffsetTop ) alert("Design Flaw!");

我的最终目标是找到最近的<a>标记,其开始位于当前视口的顶部之上.这样我就可以向后(和向前)跳转到相对于文档中当前位置的书签.

我应该使用其他一些措施来代替scrollTop和累积offsetTop吗？

我正在使用Chrome浏览器来探索这个问题,但我想最终找到一些适用于至少几种现代浏览器的东西.我试图避免使用jQuery.

我正在尝试为以下布局创建CSS.这与表非常相似,但我使用它来呈现不包含表格数据的XML.

我想要两个或更多列以及一个或多个贯穿这些列的水平规则(不可见线).规则之间的垂直空间确定与表的行高完全相同,取决​​于该行单元格中内容的最大高度.

此"表"中的所有"单元格"包含两个可选块.上部块在上部规则下方对齐.下部块在下部规则上方对齐.这是一个例子:

上面和下面的块都是可选的,因此每个"单元"将具有以下配置之一.块没有固定的高度; 它们可能包含根据"单元格"的宽度包装的文本.

因为这非常像一张桌子,所以我试着用它来渲染它display:table.第一个问题:如何在单个内部创建上部和下部块table-cell？这是我的第一次尝试.

我认为这相当于在其容器底部"浮动"一个块的问题.这个问题的公认答案表明这可能是不可能的.

XML片段

这是我正在尝试渲染的XML的简化示例.

<block>
    <horizontal-rule>
        <column>
            <above-rule>When in the Course of human events</above-rule>
        </column>
        <column>
            <above-rule>to dissolve the political bands</above-rule>
            <below-rule>it becomes necessary for one people</below-rule>
        </column>
        <column>
            <below-rule>which have connected them with another</below-rule>
        </column>
    </horizontal-rule>
</block>

在试图让它工作时,我一直在尝试修改我原来的XML模式.在第二个XML示例中,我不是按相邻的水平规则进行分组,而是按行尝试更像"表"的分组.在翻译中,<above-rule>变得<cell-bottom>和<below-rule>变<cell-top>.我更喜欢原来的,但我在这个方面取得了更多进展.

<block>
    <row>
        <cell>
            <cell-bottom>When in the Course of human events</cell-bottom>
        </cell>
        <cell>
            <cell-top>it becomes necessary for one people</cell-top>
            <cell-bottom>to dissolve …