CSS - disporre div a scacchiera

**ultimateshadow** · 16-10-2012, 15:26

Ciao a tutti!
Vorrei chiedervi un consiglio: devo realizzare un layout secondo questo schema.

codice:

<div> contenitore
--------------------------------------------------------------------------------------
-------------------                         --------------------
|<div> contenuto 1|                         |.....             |
-------------------   -------------------   --------------------   -------------------
                      |<div> contenuto 2|                          |<div> contenuto n|
                      -------------------                          -------------------
--------------------------------------------------------------------------------------

dato un div devo disporre in sequenza da sinistra a destra i div figli in modo tale che vadano uno allineato in alto e uno allineato in basso. Per ora tutto quello che ho è un display: inline-block; per tutti i div figli e ovviamente quelli da allineare in alto si allineano per il normale flusso della pagina, il problema è allineare in basso gli altri (e non con position: absolute; perchè così si perde la sequenza, sono tutti allineati a sinistra e sovrapposti)...

qualche idea!?

**Prill** · 16-10-2012, 15:58

qualche idea!?

assegnare ai div pari un padding-top o un margin-top dell'altezza voluta (discorso non valido se i div devono scendere di un'altezza pari a quella occupata dai contenuti dei div dispari che non è nota). Esempio:

codice:

...
.scacchi div {
float:left;
width:100px; /*da modificare */
margin-bottom:30px; /*da modificare */
text-align:center;
border:1px solid #999;
}
.scacchi .pari {
margin-top:30px;
margin-bottom:0;
}
-->
</style>
</head>

<body>
<div class="scacchi">
 <div>uno</div>
 <div class="pari">due</div>
 <div>tre</div>
 <div class="pari">quattro</div>
 <div>cinque</div>
</div>

**ultimateshadow** · 16-10-2012, 16:05

se ho capito ciò che intendi c'è un problema alla base che non hai considerato per colpa mia perché ho omesso un dettaglio: il div contenitore ha altezza variabile in funzione della dimensione della pagina! quindi mettendo un padding/margin in alto al ridimensionamento della finestra i div "bassi" non sono più ancorati in basso...

**Mich_** · 16-10-2012, 16:14

IL div padre deve avere altezza definita
I figli devono avere altezza minore del padre e maggiore della sua meta`.

Si puo` definire top:0 ai figli pari e bottom:0 ai figli dispari
E` necessario che i figli siano blocchi, per cui se non funziona inline-block prova ad usare il float.

Poi se si vuole la compatibilita` all'indietro, e` necessario dare classi diverse ai vari figli;
se invece si puo` usare CSS3, ci sono delle pseudoclassi che permettono di selezionare i pari e i dispari (pero` la sintassi ora non la ricordo)

**Prill** · 16-10-2012, 16:24

la larghezza della pagina è variabile? e l'altezza dei vari div da affiancare?

edit: hai avuto nel frattempo altra risposta

**ultimateshadow** · 16-10-2012, 16:36

float + bottom non funziona (già lo sapevo ma ho provato ed effettivamente non va) perchè bottom va associato a position: [relative|absolute]; e absolute da il problema citato nel primo messaggio, mentre relative gli da un bottom 0 rispetto alla sua posizione data dal normale flusso della pagina quindi di fatto non lo sposta

**Mich_** · 16-10-2012, 17:08

Puoi modificare la marcatura?

Puoi inserire un nuovo blocco attorno ai tuoi figli?

codice:

HTML:
<div id="contenitore">
  <div class="affianc">
    <div class="figlio alto">
      ...
    </div>
  </div>
  <div class="affianc">
    <div class="figlio basso">
      ...
    </div>
  </div>
  ...
</div>


CSS:
#contenitore {
  height: ...;
  width: ...;
}
.affianc {
  float: left;
  height: 100%;
  width: ...;
  position: relative;
}
.figlio {
  position: absolute;
  height: ...;
  width: ...;
}
.alto {
  top: 0;
}
.basso {
  bottom: 0;
}

**fcaldera** · 16-10-2012, 17:27

prova semplicemente così: http://jsbin.com/ekusez/1/

codice:

.board {
   width: 400px; 
   height: 304px;
   line-height: 304px;
  
   white-space: nowrap;  
}

.board div {
   display: inline-block;
   vertical-align: top;
   height: 150px;
   width: 100px;
   border: 1px #c8c8cf solid;
   white-space: normal;  
   line-height: normal;
}

.board div:nth-child(2n) {
   vertical-align: bottom;  
}

**ultimateshadow** · 16-10-2012, 18:03

Originariamente inviato da fcaldera
prova semplicemente così: http://jsbin.com/ekusez/1/

codice:

.board {
   width: 400px; 
   height: 304px;
   line-height: 304px;
  
   white-space: nowrap;  
}

.board div {
   display: inline-block;
   vertical-align: top;
   height: 150px;
   width: 100px;
   border: 1px #c8c8cf solid;
   white-space: normal;  
   line-height: normal;
}

.board div:nth-child(2n) {
   vertical-align: bottom;  
}

fantastico! l'anteprima è favolosa! ci provo subito e vi faccio sapere!!

**ultimateshadow** · 16-10-2012, 18:39

niente l'esempio funziona ma usa line-height che deve essere fisso e io ho bisogno di un'altezza del contenitore variabile, la pagina che sto facendo deve essere un template per l'output di un'applicazione e quindi devo attenermi a quello...

comunque non so... il CSS è uno strumento potentissimo e implementato anche bene peccato che alcune idee di partenza siano profondamente assurde... come il fatto che quando dai un'altezza a un blocco l'altezza effettiva viene sommata al padding... dai siamo seri se dico che il blocco deve essere alto 100px lo voglio alto 100px, che poi ti dica di distanziare il contenuto di altri 10px non deve cambiare il fatto che io ti ho dato 100px di altezza... stesso discorso per il vertical-align... ci sono 50k valori per quella proprietà ma non puoi mettere una line-height pari all'altezza del blocco senza fissare un valore statico quindi serve proprio a poco... che nervoso...

comunque grazie per le risposte, domani ci perdo ancora un po di tempo sennò cambio progetti... se ne vengo a capo posto la soluzione

Discussione: CSS - disporre div a scacchiera

Strumenti discussione

Ricerca discussione

Visualizza

CSS - disporre div a scacchiera

Permessi di invio