我精通 CSS 和 JS。在这个元素上使用 jQuery。我有一个由无序列表(带有“li”标签)组成的流体网格。每个“li”(瓷砖)具有相同的宽度和高度。随着浏览器的扩展或收缩,磁贴会向下或向上环绕以填充空间。
当用户单击图 block 时,我希望图 block 扩展到更大的固定高度和宽度,相当于两个图 block 宽度和四个图 block 高度。周围的瓷砖当然必须移动以适应充气瓷砖。但我需要瓷砖继续围绕这个现在更大的瓷砖流动,没有间隙。
我想知道是否可以使用 native CSS 实现图 block 的最终组合(带有膨胀的 float 图 block ),或者我是否需要编写 Javascript 来帮助将图 block 定位在膨胀的图 block 周围。
最佳答案
我能想到的最好方法是向选定的 li
添加一个类,并使用 CSS3 伪选择器根据位置应用和清除 float 。
例如
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> *
nth-of-type 选择器允许您选择匹配元素的独立兄弟
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/#selectors
您可能需要四处寻找比文档中提供的示例更好的使用示例,但至少您会知道要搜索什么。
显然只有现代浏览器支持这个,但是你可以修复 IE 支持
ie9.js
http://code.google.com/p/ie7-js/
或者如果该解决方案不符合您的喜好
强烈推荐jQuery masonry之前的建议
关于javascript - CSS 和 JS : How to Inflate the Size of a Tile In Grid,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6918371/