l'alfabeto in 3 colonne

**fabrrrri** · 03-01-2009, 16:15

Avrei bisogno di fare un riquadro così:

A B C
D E F
G H I
J K L
M N O
P Q R
S T U
V W X
Y Z

pensavo a 3 div float con un margin, in modo tale da avere le lettere allineate, però non mi viene

voi che dite ?

**Gufo** · 04-01-2009, 01:54

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<style type="text/css">
<!--
#div1 {
	float: left;
	margin: 0;
}
#div2 {
	float: left;
	margin: 0 0 0 5px
}
#div3 {
	float: left;
	margin: 0 0 0 5px
}
#div1, #div2, #div3 {
	width: 20px;
	font-size: 20px;
	padding: 0;
	text-align: center;
}
-->
</style>
</head>

<body>
<div id="div1">A
D
G
J
M
P
S
V
Y
</div>
<div id="div2">B
E
H
K
N
Q
T
W
Z
</div>
<div id="div3">C
F
I
L
O
R
U
X
</div>
</body>
</html>

**fabrrrri** · 04-01-2009, 04:48

Grazie .Avevo provato anchio a farlo così, ma senza il

ma il box essendo largo 20px non dovrebbe far andare a capo le lettere in automatico ?

**Mich_** · 07-01-2009, 11:56

Avrei bisogno di fare un riquadro così:
....
pensavo a 3 div float con un margin, in modo tale da avere le lettere allineate, però non mi viene voi che dite ?

Cioe` vuoi avere una serie di elementi di tipo blocco, che occupino un determinato spazio e che vadano a capo ogni tre elementi.

Prima di tutto occorre sistemare la marcatura: serve un tag che racchiuda ciascun elemento: Ad esempio si puo` pensare ad un

:

codice:

<div id="alfabeto>
  

A</p>

B</p>

C</p>
  

D</p>

E</p>

F</p>
  ...
</div>

Poi si lavora con i CSS:

codice:

#alfabeto {
  width: 100px;  /* o altra dimensione a piacere */
}
#alfabeto p {
  float: left;    /* questo li fa affiancare */
  width: 33%;   /* questo fa in modo che ce ne stiano solo 3 per riga */
}

Questo e` un CSS minimale, ma sufficiente per realizzare quanto richiesto.

**fcaldera** · 07-01-2009, 22:33

l'alfabeto è una lista di lettere
quindi si potrebbe utilizzare una semplice lista <ul>[*]...

assegna una larghezza all'elemento <ul> (in pixel), height: auto e overflow: hidden
assegna a[*] float left e width: 33%

Discussione: l'alfabeto in 3 colonne

Strumenti discussione

Ricerca discussione

Visualizza

l'alfabeto in 3 colonne

Permessi di invio