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，div将作为内联元素流动。我想要做的是能够指定一个CSS规则应该应用当兄弟div布置在同一行时（即没有插入换行符））。

例如，我们假设上面的div布局如下图所示：

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

我想写一个CSS规则，它匹配元素2,3,4和6（即div s与同一行上布置的兄弟）或反向集（元素1和5，即div s，没有兄弟姐妹在同一条线上布置。）

这对于造型非常有用，例如（假设++是我正在寻找的选择器）

.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>

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

修改 Working example on jsFiddle

注意：在调整大小时不起作用，但是当你将它移动到在窗口调整大小时调用的函数时，可以修复它。

Answer 2

你可以尝试的一件事是nth-child（）选择器。但是你可能不得不改变你处理这种情况的方式。

例如，假设您想要这样，所以除了每行的开头和结尾之外，所有元素之间都可能存在间隙，即使流入新行，也可以这样做：< / p>

<强> 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/

Answer 3

也许有点晚了，但我想你想要在线条左边或右边的无聊边缘显示项目。

如果您使用margin-left: 10px或margin-right: 10px元素，您将拥有：

+----------+------+----------+------+
| l_margin | col1 | l_margin | col2 |        (with l-margins)
+----------+------+----------+------+

+------+----------+------+----------+
| col1 | r_margin | col2 | r_margin |        (with r-margins)
+------+----------+------+----------+

就像你可以看到的那样，你总是有一个边缘，如果你想要居中，你就会遇到麻烦。

要解决此问题，只需将margin-left: -10px或margin-right: -10px添加到父元素，其中负值等于元素之间的边距。

+------+----------+------+----------+------+
|                   page                   | -r_margin 
+------+----------+------+----------+------+
| col1 | r_margin | col2 | r_margin | col3 | r_margin  
+------+----------+------+----------+------+

页边距不在页面范围内，因此您可以将行中心排除在问题之外！

jsFiddle Demo

换行符的CSS选择器

3 个答案: