基本:我有一个包含许多列表项目(包含图片和标题)的无序列表。不知道标题会有多长,我不知道每个列表项目的高度。在这个列表的左边是一个大图片,标题“设置”我的列表的高度(取决于标题的高度和长度)。
我尝试做的事情:当我的列表的最后一个列表项目无法完全显示时,隐藏整个列表项目。
示例:http://d.pr/eAlK& http://d.pr/8MVO
在第二个示例中,第4篇文章被隐藏,因为它不会完全可见。
这可能吗?如果可能的话,我更喜欢干净的方式使用crossbrowser ...
答案 0 :(得分:3)
基本上,我们的想法是计算子元素的所有高度,并与允许的最大高度进行比较。
var neededHeight = $("#lhscontainer").outerHeight(); //you can also use static value
var totalChildHeight = 0;
$("ul").children("li").each(function() {
totalChildHeight+= $(this).outerHeight(); //add up to the total height
if(totalChildHeight> neededHeight) { //compare if the height limit was exceeded
$(this).hide(); // if it did, hide the current element
$(this).nextAll().hide(); //hide all other list also
return false; // break the loop to stop the further iteration
}
});
答案 1 :(得分:2)
找到一个noJS解决方案,可以在除IE之外的任何浏览器中工作(叹息!但是降级优雅) 也许有一个解决方案:http://codeasily.com/jquery/multi-column-list-with-jquery
使用column-count
CSS
是否有机会使用像html5.js那样的列数启用脚本(哪些不起作用)?
Safari中的一些尴尬的边框错误
http://jsfiddle.net/HerrSerker/f5Zjt/4/
<div class="wrap">
<div class="wrap_1">
<img src="http://lorempixel.com/400/200/sports/2" width="400" height="200" />
<h2>Some text, can be multiple lines</h2>
</div>
<div class="wrap_2">
<div class="inner">
<div class="wrap_3">
<img src="http://lorempixel.com/40/40/sports/1" width="40" height="40" />
<div class="detail">Some text, can be multiple lines, that is possible</div>
</div>
<div class="wrap_3">
<img src="http://lorempixel.com/40/40/sports/1" width="40" height="40" />
<div class="detail">Some text, can be multiple lines, that is possible</div>
</div>
<div class="wrap_3">
<img src="http://lorempixel.com/40/40/sports/3" width="40" height="40" />
<div class="detail">Some text, can be multiple lines, that is possible</div>
</div>
<div class="wrap_3">
<img src="http://lorempixel.com/40/40/sports/1" width="40" height="40" />
<div class="detail">Some text, can be multiple lines</div>
</div>
<div class="wrap_3">
<img src="http://lorempixel.com/40/40/sports/1" width="40" height="40" />
<div class="detail">Some text, can be multiple lines</div>
</div>
</div>
</div>
</div>
body {
padding: 10px;
}
.wrap {
width: 600px;
border: 1px solid silver;
padding: 5px;
overflow: hidden;
position: relative;
}
.wrap_1 {
float: left;
width: 400px;
padding: 5px;
border: 1px solid gold;
overflow: hidden;
text-overflow: ellipis;
}
.wrap_2 {
top: 5px;
bottom: 5px;
right: 5px;
position: absolute;
width: 170px;
padding: 5px;
border: 1px solid gold;
overflow: hidden;
}
.wrap_2 > .inner {
position: absolute;
top:5px;
bottom: 5px;
left: 5px;
width: 350px;
/***** THE MAGIC HAPPENS HERE ******/
-moz-column-width: 170px;
-webkit-column-width: 170px;
-o-column-width: 170px;
-ms-column-width: 170px;
column-width: 170px;
-moz-column-gap: 5px;
-webkit-column-gap: 5px;
-o-column-gap: 5px;
-ms-column-gap: 5px;
column-gap: 5px;
}
.wrap_3 {
width: 158px;
padding: 5px;
border: 1px solid brown;
overflow: hidden;
}
.wrap_3+.wrap_3 {
margin-top: 5px;
}
.wrap_1 h2 {
font-size: 24px;
font-family: sans-serif;
}
.wrap_3 img {
vertical-align: top;
display: inline-block;
*zoom: 1;
*display: inline;
width: 40px;
margin-right: 5px;
}
.wrap_3 .detail {
display: inline-block;
*zoom: 1;
*display: inline;
overflow: hidden;
font-size: 14px;
font-family: sans-serif;
width: 108px;
vertical-align: top;
}
答案 2 :(得分:0)
使用Starx答案,您可以将neededHeight
设置为图像+标题div的高度