Селектор 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, div будет поступать как встроенные элементы. То, что я хотел бы сделать, - указать правило CSS, которое должно быть применено , когда sibling div выложено в той же строке (т.е. Между ними нет разрыва строки).

В качестве примера предположим, что приведенный выше div изложен как на следующей диаграмме:

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

Я хотел бы написать правило CSS, которое либо соответствует элементам 2, 3, 4 и 6 (т.е. div со словом (sibling), выложенным на той же строке) или обратным множеством (элементы 1 и 5, т.е. div без предшествующих братьев и сестер, выложенных в одной строке).

Это было бы действительно полезно для стилизации, например. (предположим, что ++ - это селектор, который я ищу)

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

Ответ 1

В 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

Примечание: не работает при изменении размера, но это можно устранить, когда вы переместите его в функцию, вызываемую при изменении размера окна.

Ответ 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  |
----------------------------------

Обратите внимание на разрыв между дочерними элементами. Конечно, вы можете использовать этот метод и для применения других стилей, т.е. Границ только между двумя div.

Надеюсь, это поможет:)

Fiddle

http://jsfiddle.net/p6rn9/

Ответ 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)
+------+----------+------+----------+

Как вы можете видеть, у вас всегда есть один край, и если вы хотите сосредоточиться на нем, у вас есть некоторые проблемы.

Для решения просто добавьте к родительскому элементу a margin-left: -10px или margin-right: -10px с отрицательным значением, равным полям между вашими элементами.

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

Поля остаются на странице, поэтому вы можете центрировать свои строки без проблем!

jsFiddle Demo