我在一个网站上工作,在列表中显示项目。现在我发现,如果标题(如卷帘)分成两行,它会弄乱下面的其余布局。我怎样才能改变这一切才不会发生呢?我需要保留更长的头衔。
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来创建相等的高度,但没有任何效果。
最佳答案
1)允许垂直空间容纳可能最长的标题,或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);
});
});
您可能想命名它并在窗口调整时运行它来更新它们。