假设我有几个相邻的元素：
<div class="container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div>
款式如下：
.container > div {
display:inline-block;
white-space:nowrap;
}
由于我们使用display：inline-block,div将作为内联元素流动.我想做的是能够指定一个CSS规则,应该在同一行上布置兄弟div时(即插入中没有换行符).
举个例子,我们假设上面的div是如下图所示：
[ 1 ][ 2 ][ 3 ][ 4 ] [ 5 ][ 6 ]
我想编写一个CSS规则,它匹配元素2,3,4和6(即在同一行上排列的兄弟节点的div)或反向集(元素1和5,即没有先前的兄弟姐妹的div)布置在同一行).
这对于造型而言非常有用,例如(假设是我正在寻找的选择器)
.container > div ++ .container > div {
/* separator between elements on the same line */
border-right:1px solid #000;
}
解决方法
CSS中没有这样的选项,尽管它是有用的.您可以通过检索定位数据在javascript中检测到它,就像从文档中Y偏移.当它不同时,您可以添加替代样式的类名.只是一个快
jQuery的例子：
var topOffset;
$(document).ready(function(){
$('.container div').each(function(index){
if (index === 0) {
// first item,set offset
topOffset = $(this).offset().top;
$(this).addClass('new-row');
} else if (topOffset < $(this).offset().top){
// new item,new row
$(this).addClass('new-row');
topOffset = $(this).offset().top;
}
});
});
这应该导致：
<div class="container"> <div class="new-row">1</div> <div>2</div> <div>3</div> <div>4</div> <div class="new-row">5</div> <div>6</div> </div>
这可以适当地使用类选择器.
