selettore CSS per le interruzioni di linea

Question

Supponiamo che io sono un paio di elementi adiacenti:

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

in stile con il seguente:

.container > div { 
    display:inline-block; 
    white-space:nowrap; 
} 

Dal momento che stiamo usando display:inline-block, i div s scorrerà come elementi in linea . Quello che mi piacerebbe fare è essere in grado di specificare una regola CSS da applicare quando i fratelli div s sono disposti sulla stessa riga (cioè non c'è un'interruzione di riga inserita tra).

Per fare un esempio, supponiamo che i div s di cui sopra sono disposti come nella figura seguente:

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

Vorrei scrivere una regola CSS che o corrisponde elementi 2, 3, 4 e 6 (ovvero div s con fratelli o sorelle disposte sulla stessa linea) o il set inverso (elementi 1 e 5, ovvero div s senza fratelli precedenti disposti sulla stessa linea).

Ciò sarebbe davvero utile per lo stile, ad es. (Supponendo ++ è il selettore che sto cercando)

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

Answer 1

Una cosa si può provare, è il selettore nth-child(). Ma potresti dover cambiare il modo in cui ti avvicini a questa situazione.

Ad esempio, supponiamo che tu lo volessi in modo da poter avere un divario tra tutti gli elementi, a parte all'inizio e alla fine di ogni riga, anche quando scorre su nuove linee, potresti fare qualcosa del genere:

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; 
} 

Con questo, si potrebbe avere qualcosa di simile:

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

Avviso il divario tra gli elementi figlio. Ovviamente si può usare questo metodo per applicare anche altri stili, cioè i bordi solo tra 2 div.

Spero che questo aiuta :)

Fiddle:

http://jsfiddle.net/p6rn9/

Answer 2

Non esiste un'opzione nel CSS, anche se sarebbe utile. È possibile rilevarlo in javascript recuperando positioningdata, come se fosse Y offset dal documento. Quando è diverso, puoi aggiungere nomi di classe per stili alternativi.Solo un rapido jQuery esempio:

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; 
     } 
    }); 
}); 

Ciò dovrebbe comportare:

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

Questo può essere uno stile appropiatly utilizzando i selettori di classe.

EDIT Working example on jsFiddle

Nota: non funziona su di ridimensionamento, ma che può essere fissato quando si sposta in una funzione che viene chiamata sulla finestra di ridimensionamento.

Answer 3

Forse è un po 'tardi, ma suppongo che vogliate visualizzare gli elementi senza i margini noiosi a sinistra oa destra della linea.

Se si utilizza il margin-left: 10px o margin-right: 10px all'elemento si avrà:

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

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

Come si può vedere, si ha sempre un margine troppo e se si vuole centrare lo hai qualche problema.

Per risolverlo è sufficiente aggiungere all'elemento padre uno margin-left: -10px o margin-right: -10px con un valore negativo uguale ai margini tra i propri elementi.

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

I margini rimangono fuori dalla pagina, quindi è possibile centrare le righe senza problemi!

jsFiddle Demo