Distribuire orizzontalmente DIV all'interno di un DIV contenitore.

**meldro** · 17-03-2008, 13:49

Dunque ho una struttura tipo:

<div id='contenitore'>
<div id='parziale'>123</div>
<div id='parziale'>123456</div>
<div id='parziale'>123456789</div>
<div id='parziale'>123456789123</div>
</div>

Il css dei due id sono:

#contenitore{
color: #000;
margin: 0px 5px 5px 5px;
padding: 0px 10px 0px 10px;
height: 35px;
width: 928px;
overflow: auto;
}

#parziale{
margin: 0px 0px 0px 0px;
padding: 7px 10px 3px 5px;
float: left;
overflow: hidden;
}

Quello che vorrei ottenere è che i 4 div con id'parziale' siano equamente distribuiti/posizionati in orizzontale dentro al div contenitore.

E' fattibile?

**Pacio88** · 17-03-2008, 15:06

In orizzontale intendi uno sopra l'altro o uno di fianco a l'altro?

Se lo vuoi uno sopra l'altro aggiungi un width:100% al div parziale.

**Mich_** · 17-03-2008, 15:49

Attenzione, non puoi dare id uguale a piu` di un elemento nella stessa pagina.
Quindi i parziali devono diventare:
<div class='parziale'>...</div>

Poi per spaziare in modo uniforme, devi semplicemente dare margini orizzontali automatici: gli spazi si dividono in parti uguali.

Esempio:

codice:

.parziale{
  margin: 0 auto;
  padding: 7px 10px 3px 5px;
  float: left;
  overflow: hidden;
}

Forse e` necessario dare una dimensione orizzontale ai vari blocchi.

Se poi vuoi che il primo e l'ultimo tocchino i bordi del contenitore, puoi fare:

codice:

.parziale{
  margin: 0 auto 0 0;
  padding: 7px 10px 3px 5px;
  float: left;
  overflow: hidden;
}
.ultimo {
  margin: 0;
}

dove all'ultimo dei blocchi devi anche assegnare la classe ultimo:
<div class='parziale ultimo'>...</div>

**meldro** · 17-03-2008, 16:35

Originariamente inviato da Pacio88
In orizzontale intendi uno sopra l'altro o uno di fianco a l'altro?

Se lo vuoi uno sopra l'altro aggiungi un width:100% al div parziale.

Uno di fianco all'altro

**meldro** · 17-03-2008, 16:36

Originariamente inviato da Mich_
Attenzione, non puoi dare id uguale a piu` di un elemento nella stessa pagina.
Quindi i parziali devono diventare:
<div class='parziale'>...</div>

Poi per spaziare in modo uniforme, devi semplicemente dare margini orizzontali automatici: gli spazi si dividono in parti uguali.

Esempio:

codice:

.parziale{
  margin: 0 auto;
  padding: 7px 10px 3px 5px;
  float: left;
  overflow: hidden;
}

Forse e` necessario dare una dimensione orizzontale ai vari blocchi.

Se poi vuoi che il primo e l'ultimo tocchino i bordi del contenitore, puoi fare:

codice:

.parziale{
  margin: 0 auto 0 0;
  padding: 7px 10px 3px 5px;
  float: left;
  overflow: hidden;
}
.ultimo {
  margin: 0;
}

dove all'ultimo dei blocchi devi anche assegnare la classe ultimo:
<div class='parziale ultimo'>...</div>

Ho seguito i tuoi consigli ma a parte l'errore sull'id non univoco (grazie, mi era proprio sfuggito) facendo le modifiche che mi hai scritto sopra, non cambia nulla rispetto alla prima versione del codice.

**Mich_** · 17-03-2008, 16:51

Dovresti dire cosa hai fatto (posta il codice - usa i bottoni # o PHP): io ho proposto due soluzioni, e la variante di inserire la dimensione nei blocchi interni (in quello esterno c'e` gia`).

Inoltre non hai detto in quale browser hai testato.
E metti anche la DTD che usi.

**meldro** · 17-03-2008, 16:57

Originariamente inviato da Mich_
Dovresti dire cosa hai fatto (posta il codice - usa i bottoni # o PHP): io ho proposto due soluzioni, e la variante di inserire la dimensione nei blocchi interni (in quello esterno c'e` gia`).

Inoltre non hai detto in quale browser hai testato.
E metti anche la DTD che usi.

Allora testato su IE e FF.
Non posso dare una dimensione fissa ai blocchi perchè il contenuto è variabile.
Ho corretto l'id con class ed ho usato esattamente le modifiche che mi avevi scritto precendentemente relativamente alla seconda opzione per la precisione:

Codice PHP:


.parziale{

  margin: 0 auto 0 0;

  padding: 7px 10px 3px 5px;

  float: left;

  overflow: hidden;

}

.ultimo {

  margin: 0;

}

Ed i div sono diventati:

codice:

<div id='contenitore'>
<div class='parziale'>123</div>
<div class='parziale'>123456</div>
<div class='parziale'>123456789</div>
<div class='parziale ultimo'>123456789123</div>
</div>

La DTD: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

**Mich_** · 17-03-2008, 17:11

Non dare la dimensione e` un problema.
In linea di massima tutti i blocchi float dovrebbero avere una dimensione.
Pero` puoi dare la dimensione in qualsiasi unita` di misura: px (proporzionale alle immagini), em (proporzionale al carattere usato), % (del contenitore), ecc.

Per capire cosa fa il browser, puo` essere utile dare un colore di sfondo (diverso tra contenitore e parziali).

**meldro** · 17-03-2008, 17:13

Per capire cosa fa il browser, puo` essere utile dare un colore di sfondo (diverso tra contenitore e parziali).

Si questo non te l'ho scritto ma l'ho fatto... ;-)

Discussione: Distribuire orizzontalmente DIV all'interno di un DIV contenitore.

Strumenti discussione

Ricerca discussione

Visualizza

Distribuire orizzontalmente DIV all'interno di un DIV contenitore.

Permessi di invio