停止 long header 破 li 列表

Question

我正在开发一个在列表中显示项目的网站。现在我发现如果标题（例如卷帘）分成两行，它会弄乱下面的其余布局。我怎样才能改变这个，这样就不会发生？我需要保留更长标题的选项。

CSS:

#solutions-categories .inner-box{
    padding:20px;}

#solutions-categories ul{
    padding:0;
    margin:0px -10px;
    list-style:none;}

#solutions-categories ul li.solution-category{
    width:25%;
    float:left;
    padding:0px 10px 40px 10px;}

.solutions-category-image{
    margin-bottom:20px;}

.solutions-category-image img{
    height:auto;
    width:100%;}

.solutions-category-title h3{
    margin: 25px 0px 15px 0px;}

.solutions-category-title .divider{
    margin-bottom: 25px !important;}

现在我尝试将其更改为浮动 div 而不是 li 元素，我尝试使用 JS 创建相同的高度但没有任何效果。

Answer 1

1) 允许垂直 space 容纳可能最长的标题，或 2) 使用 JavaScript 计算最高的标题并使它们全部匹配。

jQuery(function($) {
    var maxTitleHt = 0;

    $('.solutions-category-title h3').each(function() {
        var titleHt = $(this).height();

        if (titleHt > maxTitleHt) {
            maxTitleHt = titleHt;
        }

        $(this).height(maxTitleHt);
    });
});

您可能想要命名并运行它 window 调整大小以更新它们。

停止 long header 破 li 列表

Stop long header breaking li list

html

css

html-lists