Html 如何将内联块内的这些链接与顶部对齐？

我对缩略图列表有点CSS问题。下面是一个例子：

问题是，当链接太长而无法放入150px块时，它会将图像向下推。通过在列表元素上使用

inline block

，而不是float，我可以让图像正确对齐，但现在我希望链接的高度也相同

我尝试过的一件事是将链接本身做成一个块（或用div包围它），并给它一个高度，但这意味着它们总是相同的高度，即使没有链接使用两个规则。此外，如果一个链接太长，它使用三条线，同样的问题也会发生

---

简而言之：如何在不破坏图像对齐的情况下将链接对齐到列表项的顶部？

添加

垂直对齐：顶部到图像。
添加
垂直对齐：顶部到图像。
这是怎么回事：

这是怎么回事：

那么你是说你希望链接不要向下推内容？我不认为这是可能的，除非你不允许你的内容延伸。如果页面需要更多的空间，页面自然会在内容上方的内容上下压

你有没有想过在一定数量的字符后用“…”切掉文本，通过
标题提供全文，并通过弹出窗口提供全文（因为我假设你正在创建某种照片库）？
那么你是说你希望链接不要向下推送内容？我不认为这是可能的，除非你不允许你的内容延伸。如果页面需要更多的空间，页面自然会在内容上方的内容上下压

您是否考虑过在一定数量的字符后用“…”切掉文本，通过
标题提供全文，并通过弹出窗口提供全文（因为我假设您正在创建某种照片库）？
想到的第一个答案是：

“只需使用一张桌子，它就非常容易，而且可以在任何地方使用”



然而，如果我发布了一个只包含
标签版本的答案，我可能会被投票遗忘，所以这里有一个使用CSS
显示：table
和friends:


当然，这在IE7中是行不通的，因为那是一款浏览器

我想不出一种方法来使用更接近原始代码的代码和
display:inline block
，它也支持任意数量的行。我很想找到更好的方法

HTML:

<div id="container">
    <div class="row">
        <div class="cell"><a href="#">Some text</a></div>
        <div class="cell"><a href="#">Some more text (too long)</a></div>
        <div class="cell"><a href="#">Some text</a></div>
        <div class="cell"><a href="#">Some text (seriously too long) text text text text text text text text text text text text text</a></div>
    </div>
    <div class="row">
        <div class="cell"><div class="image">image</div></div>
        <div class="cell"><div class="image">image</div></div>
        <div class="cell"><div class="image">image</div></div>
        <div class="cell"><div class="image">image</div></div>
    </div>
</div>

#container {
    display: table
}
.row {
    display: table-row;
    text-align: center
}
.cell {
    display: table-cell;
    width: 150px
}
.image {
    width: 150px;
    height: 150px;
    background: grey
}

我想到的第一个答案是：

“只需使用一张桌子，它就非常容易，而且可以在任何地方使用”



然而，如果我发布了一个只包含
标签版本的答案，我可能会被投票遗忘，所以这里有一个使用CSS
显示：table
和friends:


当然，这在IE7中是行不通的，因为那是一款浏览器

我想不出一种方法来使用更接近原始代码的代码和
display:inline block
，它也支持任意数量的行。我很想找到更好的方法

HTML:

<div id="container">
    <div class="row">
        <div class="cell"><a href="#">Some text</a></div>
        <div class="cell"><a href="#">Some more text (too long)</a></div>
        <div class="cell"><a href="#">Some text</a></div>
        <div class="cell"><a href="#">Some text (seriously too long) text text text text text text text text text text text text text</a></div>
    </div>
    <div class="row">
        <div class="cell"><div class="image">image</div></div>
        <div class="cell"><div class="image">image</div></div>
        <div class="cell"><div class="image">image</div></div>
        <div class="cell"><div class="image">image</div></div>
    </div>
</div>

#container {
    display: table
}
.row {
    display: table-row;
    text-align: center
}
.cell {
    display: table-cell;
    width: 150px
}
.image {
    width: 150px;
    height: 150px;
    background: grey
}

要解决一个问题，可以添加
垂直对齐：顶部
到
标记，以便将内容与元素顶部对齐，但不幸的是，我认为如果不同时实现以下方法之一，就无法完全解决此问题：

将所有标记放置在单独的
在标记上指定高度
使用javascript平衡高度

选择权
1.独立部门
通过将锚定标记移动到一个单独的div中，它们可以被赋予与图像相同的宽度，并相应地浮动或内联显示，但是当您将锚定标记与内容分离时，您的标记就变得不那么语义化了（如果这些标记是动态生成的，那么在编程上也可能更加复杂）

2.指定高度
此选项几乎可以立即被丢弃，因为正如您所述，锚定长度可以波动到多条线。您可以指定高度和已知的最大行长度，但最终会导致不必要的空白和多组短链接

3.JavaScript（jQuery）
虽然在不需要JavaScript的情况下解决这个问题是很理想的，但我认为这可能是唯一一个允许您保留标记语义并对每个锚标记应用相同高度的选项


推荐解决方案
我建议在已知最大线长度的锚点上设置默认高度，然后应用一点jQuery来规范锚点的高度。这样，如果JavaScript解析失败或JavaScript被禁用，用户仍然会看到一个统一的布局（尽管可能有更多的空白），并且JavaScript处于活动状态时，高度会被规范化


应用
垂直对齐：顶部到

为非js用户定义默认高度
使用jQuery均衡高度：

(function(){
    $.fn.equalizeHeights = function(){
        return this.height( Math.max.apply(this, $(this).map(function(i,e){ return $(e).height() }).get() ))
    }
    $(function(){ $('li a').equalizeHeights(); });
})();



示例：
要解决一个问题，可以添加
垂直对齐：顶部
到
标记，以便将内容与元素顶部对齐，但不幸的是，我认为如果不同时实现以下方法之一，就无法完全解决此问题：

将所有标记放置在单独的
在标记上指定高度
使用javascript平衡高度

选择权
1.独立部门
通过将锚定标记移动到一个单独的div中，它们可以被赋予与图像相同的宽度，并相应地浮动或内联显示，但您的标记将变为