当<li>元素没有完全可见时隐藏它。

Question

基础信息: 我有一个无序列表，其中包含许多列表项（包括图片和标题）。我不知道每个列表项的高度，因为我不知道标题的长度。在列表的左侧是一张大图片和标题，它“设置”了我的列表的高度（取决于标题的高度和长度）。

我的尝试: 当我的列表中的最后一个列表项无法完全显示时，隐藏整个列表项。

示例: http://d.pr/eAlK & http://d.pr/8MVO

在第二个示例中，第四篇文章被隐藏，因为它无法完全显示。

这可行吗？如果可能的话，我 prefer 一个适用于跨浏览器的干净的方式...

- JeroenVdb

---

最好使用Fiddle设置您的标记？ - Starx

你是否使用类似于jQuery的工具包，还是希望得到一个纯JavaScript的答案？ - S22h

@JeroenVdb - 请确保将jQuery作为您的问题标签添加！我已经为您添加了它。 - mrtsherman

Answer 1

基本上的想法是计算所有子元素的高度并将其总和与最大允许高度进行比较。

使用jQuery

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
    }
});

- Starx

---

不错！当你发布时，我还在打类似的东西，所以我就不发了。我会使用左侧容器元素的outerHeight()值来设置neededHeight变量，以保持其动态性。 - James South

@JamesSouth，是的...最好在答案中包含它。 - Starx

@Starx 非常感谢！如果有一个纯CSS的解决方案会更好，但这看起来是一个很棒且稳定的jQuery替代品！谢谢！ - JeroenVdb

@Starx，小bug修复：'totalHeight'变量应该是'totalChildHeight'。 - JeroenVdb

@JeroenVdb，天啊，我简直不敢相信那是个笔误。现在已经修复了。谢谢。 - Starx

Answer 2

我找到了一个没有JS的解决方案，它在除了IE以外的任何浏览器中都可以工作（叹气！但是可以优雅地退化）

也许这个链接中有一个解决方案：http://codeasily.com/jquery/multi-column-list-with-jquery

使用column-count CSS。
有没有可能拥有一个像html5.js一样启用column-count的脚本（它不起作用）？

Safari中存在一些尴尬的边框问题

http://jsfiddle.net/HerrSerker/f5Zjt/4/

---

HTML

<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>​

---

CSS

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;
}
​

- yunzen

Answer 3

使用Starx Answer，您可以将neededHeight设置为图像+标题div的高度。

- CyrillC