Div affiancati alla massima larghezza

**Elisa_73** · 05-04-2007, 19:07

Ciao, malgrado le abbia provate in tutti modi, non sono riuscita ad affiancare 3 div (che contengono rispettivamente 3 immagini di uguali dimensioni) orizzontalmente e che occupino tutta la larghezza del div principale che le contiene.

#contenitore {
width: 600px;
border: 1px dotted #000000;
}
.box1 {
text-align: center;
float: left;
width: ?;
border: 1px dotted #FF0000;
}

<body>
<div id="contenitore">
<div class="box1">
[img]ita/css/event_dot.gif[/img]
</div>
<div class="box1">
[img]ita/css/event_dot.gif[/img]
</div>
<div class="box1">
[img]ita/css/event_dot.gif[/img]
</div>
</div>
</body>

Nel codice c'è il div "contenitore" che ha un valore in pixel ben definito: i 3 div "box1" si affiancano si orizzontalmente, ma sono "schiacciati" verso la sinistra.
Che valore di width bisogna asegnargli?

Grazie in anticipo!

**fcaldera** · 05-04-2007, 21:05

dal momento che i box sono 3 in un spazio di 600px e hanno un bordo la larghezza corretta è di 198px

**Elisa_73** · 05-04-2007, 22:29

Ciao fcaldera,
quindi è necessario indicare la larghezza....
E se volessi utilizzare la stessa regola in un'altra pagina in cui però devo inserire 4 div affiancati, non la posso più utilizzare, giusto? Ne dovrei fare una nuova con un diverso valore di larghezza?

**fcaldera** · 05-04-2007, 22:44

esattamente... un div è un elemento blocco e come tale, in mancanza di una larghezza specifica, occupa tutto lo spazio orizzontale disponibile.

**Elisa_73** · 06-04-2007, 11:23

Capito.
Ultima domanda da novizia: se allora in un sito ho circa una decina di pagine in cui devo affiancare delle immagini contenute in DIV (a volte 2, altre 3 oppure 4, ecc...) mi conviene utilizzare delle tabelle (formattate con CSS) oppure crare 10 regole diverse a seconda che abbia 2,3,4,ecc.. div affiancati?

Grazie ancora!

**fcaldera** · 06-04-2007, 12:15

a mio parere le tabelle non dovrebbero essere usate per contenere delle foto

io risolverei creando tante classi da assegnare ai div interni quante sono le possibili disposizioni e ad ogni classe farei corrispondere una larghezza diversa

**Elisa_73** · 06-04-2007, 12:24

Tutto chiaro, allora procedo come suggerisci tu!
Grazie 1000!
CIAO

**Mich_** · 12-04-2007, 10:19

Oppure puoi usare i margini automatici per spaziare in modo uniforme vari oggetti.
<div id="conten">
<img class="dentro">
...
</div>

CSS:

codice:

conten {
  width: 100%;          /* anche html e body devono averlo e tutti i blocchi in mezzo */
}
dentro {
  display: block;        /* rende le immagini di tipo blocco */
  margin 0 auto;
}

Discussione: Div affiancati alla massima larghezza

Strumenti discussione

Ricerca discussione

Visualizza

Div affiancati alla massima larghezza

Permessi di invio