13

假设我有几个相邻的元素：

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

例如，假设div上面的 s 如下图所示：

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

我想编写一个 CSS 规则来匹配元素 2、3、4 和 6（即divs 与在同一行上布置的兄弟姐妹）或逆集（元素 1 和 5，即div没有先前兄弟姐妹的 s布置在同一行）。

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

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

3 回答 3

6

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>

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

编辑 jsFiddle 上的工作示例

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

于 2013-03-25T13:56:58.933 回答
1

您可以尝试的一件事是 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/

于 2013-03-25T13:56:33.847 回答
0

也许有点晚了，但我想你想在行的左边或右边显示没有无聊边距的项目。

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

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

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

正如你所看到的，你总是有太多的边距，如果你想要居中，你会遇到一些麻烦。

为了解决它，只需添加到父元素 amargin-left: -10px或margin-right: -10px负值等于元素之间的边距。

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

页边距仍然在页面之外，因此您可以将行居中而不会出现问题！

jsFiddle 演示

于 2014-09-03T07:49:54.217 回答