Question

我有一个缩略图列表的CSS问题。这是一个例子： http://jsfiddle.net/22hs8/

问题是，当链接太长而无法放入150px块时，它会将图像向下推。通过在列表元素上使用inline-block而不是浮点数，我可以使图像正确排列，但现在我想让链接处于相同的高度。

我尝试过的一件事就是让链接本身成为一个块（或用div包围它）并赋予它一个高度，但这意味着它们总是相同的高度，即使这些链接都没有使用两个规则。此外，如果链接太长则使用三行，则会出现同样的问题。

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

Answer 1

要解决一个问题，您可以将vertical-align:top;添加到<li>代码，以便将内容与元素的顶部对齐，但不幸的是，我不相信有办法解决完全没有实现以下方法之一的问题：

将所有标记放在单独的
在标签上指定高度
使用javascript来均衡高度

选项

1。单独的分区

通过将锚标记移动到单独的div中，它们可以被赋予与图像相同的宽度，并相应地浮动或显示内联，但是当您将锚点与内容分离时，您的标记变得不那么语义（并且也可能是以编程方式如果动态生成它们会更复杂。）

2。指定高度

此选项几乎可以立即抛出，因为正如您所说，锚长度可以波动到多行。你可以指定最大知道行长度的高度，但最终你会得到不必要的空格和短链接组。

3。 JavaScript（jQuery）

虽然在没有JavaScript要求的情况下解决此问题是理想的，但我认为它可能是唯一允许您保留标记语义的选项，并且对每个锚标记应用相同的高度

推荐的解决方案

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

将vertical-align:top;应用于<li>
为非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(); });
})();

示例： http://jsfiddle.net/Eg7hy/

Answer 2

这是怎么回事：

http://jsfiddle.net/22hs8/3/

Answer 3

所以你说你想要链接不要推倒内容？我不认为这是可能的，除非你根本不允许你的内容延伸。如果内容需要更多空间，那么页面的自然流量就会超出内容的某些内容，以便在内容之后将内容强制缩小。

你有没有想过在一定数量的字符之后砍掉文字，用'...'并通过title提供全文，并通过弹出窗口提供全文（因为我假设你正在创建某种照片库？）

Answer 4

首先想到的答案是：

“只需使用一张桌子，它就可以让这个非常简单，而且无处不在”

Live Demo

但是，如果我发布的答案只包含<table>标签版本，我可能会被遗忘投票，所以这里是使用CSS display: table和朋友的版本：

Live Demo

当然，这在IE7中不起作用，因为浏览器doesn't support display: table。

我无法想到使用更接近原始代码和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>

（如果您愿意，可以将其中一些div代码更改为ul和li

<强> CSS：

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

Answer 5

将vertical-align:top;添加到图片中。

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

5 个答案:

选项

1。单独的分区

2。指定高度

3。 JavaScript（jQuery）

推荐的解决方案