CSS和JS:如何在网格中增加贴图的大小

CSS and JS: How to Inflate the Size of a Tile In Grid

本文关键字：增加 网格 JS CSS      更新时间：2023-09-26

熟练使用CSS和JS。在这个项目中使用jQuery。我有一个由无序列表(带有'li'标签)组成的流体网格。每个'li' (tile)都有相同的宽度和高度。当浏览器扩展或收缩时，磁贴会向下或向上折叠以填充空间。

当用户点击一个贴图时，我希望这个贴图扩展到一个更大的固定高度和宽度，相当于两个贴图的宽度和四个贴图的高度。当然，周围的瓷砖将不得不改变以适应膨胀的瓷砖。但我需要瓷砖继续围绕现在更大的瓷砖流动，没有缝隙。

我想知道瓦片的最终组成(带有膨胀的浮动瓦片)是否可以用本地CSS实现，或者我是否需要编写Javascript来帮助在膨胀的瓦片周围定位。

我能想到的最好的方法是为选定的li添加一个类，并使用CSS3伪选择器根据位置应用和清除浮动。

。

li.active ~ li:nth-of-type(1n+2) {
    float: left
}
li.active ~ li:nth-of-type(1n+2):after {
    content: ''0a00' // whitespace
    width: 0;
    height: 0;
    line-height: 0;
    clear: left;
}

如果你还没有遇到它们，我将解释选择器

/ the ~ ( tilde ) is an adjacent element selector, imagine the following html
<li></li>
<li></li>
<li class="active"></li>
<li></li>
<li></li> 
And css 
li.active ~ li {
    background-color: green;
}
// the ~ would select all the li elements that come after the the occurence of 
// .active element and apply a green background. illustrated below with an *
<li></li>
<li></li>
<li class="active"></li>
<li></li> *
<li></li> *

第n个类型选择器允许您选择匹配元素的独立兄弟元素

using previous html
with this css
// the nth-of-type value can also be an equation e.g. 1n + 2
li:nth-of-type(2) {
    background-color: green;
}
<li></li>
<li></li> *
<li class="active"></li>
<li></li>
<li></li>

组合在一起

li.active ~ li:nth-of-type(2) {
    background-color: green;
}
<li></li>
<li></li> 
<li class="active"></li>
<li></li>
<li></li> *

这是一个非常优雅的解决方案，它可能需要一些摆弄才能得到你想要的结果，但你肯定有CSS中的工具来做到这一点。

这里是一个完整的CSS3选择器列表，以及它们的作用。

http://www.w3.org/TR/css3-selectors/选择器

你可能需要寻找比文档中提供的更好的使用示例，但至少你会知道要搜索什么。

显然只有现代浏览器才支持这个，但是你可以通过

修复IE的支持。

ie9.js

http://code.google.com/p/ie7-js/

或者如果这个解决方案没有引起你的兴趣

我强烈推荐之前的jQuery砌筑建议

http://masonry.desandro.com/

您是否尝试过为元素的变化状态创建一个新类，并使用jQuery删除旧类并添加新类?一些关键字:

.removeClass()
li.oldandbusted {
width:100px;
height:100px;
}
.addClass();
li.newhotness {
width:500px;
height:500px;
}
相关文章：