换行符的CSS选择器

Question

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

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

作为一个例子,我们假设div上面的s布局如下图所示:

[ 1 ][ 2 ][ 3 ][ 4 ]
[ 5 ][ 6 ] 

我想写一个CSS规则,它匹配元素2,3,4和6(即divs与同一行上布置的兄弟)或反向集(元素1和5,即divs没有先前的兄弟姐妹)在同一条线上布置).

这对样式非常有用,例如(假设++我正在寻找的选择器)

.container > div ++ .container > div {
  /* separator between elements on the same line */
  border-right:1px solid #000; 
}

Answer 1

CSS中没有这样的选项,尽管它很有用.您可以通过检索locatedata在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>

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

编辑 关于jsFiddle的工作示例

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

Answer 2

您可以尝试的一件事是 nth-child() 选择器。但你可能必须改变处理这种情况的方式。

例如，假设您希望这样做，这样除了每行的开头和结尾之外，所有元素之间都可以有间隙，即使在流到新行时，您也可以执行以下操作：

HTML：

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
</div>

CSS：

.container {
    border: 1px solid red;
    width: 810px;
}

.container > .item {
    border: 1px solid blue;
    display: inline-block;
    margin-right: 10px;
    width: 190px;
}

.container > .item:nth-child(4n) {
    margin-right: 0;
}

有了这个，你可以得到类似的东西：

----------------------------------
|  1  |  |  2  |  |  3  |  |  4  |
----------------------------------
|  5  |  |  6  |
----------------------------------

注意子元素之间的间隙。当然，您也可以使用此方法来应用其他样式，即仅在 2 个 div 之间设置边框。

我希望这有帮助 ：）

小提琴：

http://jsfiddle.net/p6rn9/