用于换行的 CSS 选择器

假设我有一些相邻的元素：

<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, the divs 将作为内联元素流动。我想做的是能够指定应该应用的 CSS 规则当兄弟姐妹divs 布置在同一条线上（即中间没有插入换行符）。

作为一个例子，我们假设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 http://jquery.com/例子：

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>

可以使用类选择器适当地设置样式。

EDIT jsFiddle 上的工作示例 http://jsfiddle.net/dVAJa/

注意：不适用于调整大小，但是当您将其移动到在窗口调整大小时调用的函数中时，可以修复此问题。