Colonne Multiple

Div

Di seguito troverete diversi esempi che spiegano come utilizzare le div per realizzare colonne multiple. Potete fare il copia-incolla del codice ed aggiungerlo secondo le vostre necessità.

Galleggiamento - contornamento

Per fare in modo che il testo e gli altri oggetti girino attorno (galleggiamento) ai bordi di un div o di una immagine dovete attribuire al medesimo div (o immagine) la proprietà «float ». Quando utilizzate questa proprietà, dovete poi annullarla alla fine del codice mediante uno dei modi sottoindicati.
Inoltre dovete fare delle prove per verificare quale dei due modi opera meglio nel vostro caso.

  1. ~~~~
  2. [[div style="clear:right;height:1px;"]] [[/div]]

Nei casi indicati di seguito, nell'esempio 1, l'espressione ~~~~ non funziona bene, mentre funziona benissimo nell'esempio 3.

Esempio 1

Un modo di creare colonne multiple consiste nell'impiego dei div.

Colonne ripetute:

un
un
un

deux
deux
deux

trois
trois
trois

quatre
quatre
quatre

cinq
cinq
cinq

six
six
six

Affinchè le colonne della dodicesima line si collochino al di sotto delle prime 3, dovete annullare il galleggiamento tra i due gruppi utilizzando l'espressione:

[[div style="clear:right;height:1px;"]]

Ecco il codice impiegato per generare questa struttura.
Osservate che l'ordine delle colonne dipende dal tipo di galleggiamento- contornamento (sinistro o destro) che avete scelto.

[[div style="float:right;width:33%;"]]
un
un
un
[[/div]]

[[div style="float:right;width:33%;"]]
deux
deux
deux
[[/div]]

[[div style="float:right;width:33%;"]]
trois
trois
trois
[[/div]]

[[div style="clear:right;height:1px;"]]
[[/div]]

[[div style="float:left;width:33%;"]]
quatre
quatre
quatre
[[/div]]

[[div style="float:left;width:33%;"]]
cinq
cinq
cinq
[[/div]]

[[div style="float:left;width:33%;"]]
six
six
six
[[/div]]

[[div style="clear:right;height:10px;"]]
[[/div]]

Esempio 2

Tiré des pages de Snippets

Box 1

Contenuto del primo box

Box 2

Contenuto del secondo box

Box 3

Contenuto del terzo box

Box 4

Contenuto del quarto box

[[div style="border:solid 1px #999999;width:48%;height:12em;background:#fdf5e6;padding:5px;float:left;margin-bottom:4px"]]
**Box 1**

Contenuto del primo box
[[/div]]
[[div style="border:solid 1px #ffffff;width:48%;height:12em;background:#ffffff;padding:5px;float:right;margin-bottom:4px"]]
**Box 2**

Contenuto del secondo box
[[/div]]

[[div style="border:solid 1px #ffffff;width:48%;height:12em;background:#ffffff;padding:5px;float:left;margin-bottom:4px;"]]
**Boix 3**

Contenuto del terzo box
[[/div]]
[[div style="border:solid 1px #999999;width:48%;height:12em;background:#ffe4e1;padding:5px;float:right;margin-bottom:4px;"]]
**Boix 4**

Contenuto del quarto box
[[/div]]

[[div style="clear:right;height:1px;"]]
[[/div]]

Esempio 3

Questo esempio è basato su quello precedente, con qualche aggiustamento delle variabili e l'inserimento di tabelle nei box.
Osservate che la variabile "height" (altezza) può provocare la sparizione di alcuni dati, quando la finestra del browser viene ridimensionata.

Variables Used: Experiment with
Border colour adjustment "border:solid 1px #fff;
Border width adjustment width:45%;
Border height adjustment height:35em;
Background Colour adjustment background:#ffffff
Padding adjustment padding:5px
Position adjustment float:left
Margin Bottom adjustment margin-bottom:4px

General Information
UID
ID 2
Continent e
Country NL
Original Name European parliamentary elections
English Name missing
Level 1
Binding Yes
Shadow election no
Start Date 38139
End Date 38148
Election Period 9
When did the electronic vote cast take place? Before and during Election Period
Available channels
Polling Place 1
Postal Voting 1
Counting Machine 0
Voting Machine 1
Networked Voting machine 0
Kiosk Voting 0
Remote Electronic Voting 1
Software missing
Main Provider LogicaCMG
User name and Password 0
TAN 1
Signature Card 0
Biometric properties 0
Other 0
Statistics
Eligible Voters 16000
Votes missing
Eligible Electronic Voters 7196
Electronic Votes 2253
Turnout Groups C
Turnout missing
Electronic Turnout missing
Anonymity
Separate Machines 0
Pre-election 1
Election 0
Post Casting 0
Other missing
Comments Leotine Leober

Grazie a http://e-voting.wikidot.com/ per aver consentito l'uso delle loro tabelle.

[[div style="border:solid 1px #fff;width:45%;height:35em;background:#ffffff;padding:5px;float:left;margin-bottom:4px"]]
||||~ General Information||
|| UID|| ||
|| ID|| 2||
|| Continent|| e||
|| Country|| NL||
|| Original Name|| European parliamentary elections||
|| English Name|| missing||
|| Level|| 1||
|| Binding|| Yes||
|| Shadow election|| no||
|| Start Date|| 38139||
|| End Date|| 38148||
|| Election Period|| 9||
|| When did the electronic vote cast take place?|| Before and during Election Period||
[[/div]]

[[div style="border:solid 1px #fff;width:45%;height:35em;background:#fff;padding:5px;float:left;margin-bottom:4px"]]
||||~ Available channels||
|| Polling Place|| 1||
|| Postal Voting|| 1||
|| Counting Machine|| 0||
|| Voting Machine|| 1||
|| Networked Voting machine|| 0||
|| Kiosk Voting|| 0||
|| Remote Electronic Voting|| 1||
|| Software|| missing||
|| Main Provider|| LogicaCMG||
|| User name and Password|| 0||
|| TAN|| 1||
|| Signature Card|| 0||
|| Biometric properties|| 0||
|| Other|| 0||
[[/div]]

[[div style="border:solid 1px #fff;width:45%;height:20em;background:#fff;padding:5px;float:left;margin-bottom:4px;"]]
||||~ Statistics||
|| Eligible Voters|| 16000||
|| Votes|| missing||
|| Eligible Electronic Voters|| 7196||
|| Electronic Votes|| 2253||
|| Turnout Groups|| C||
|| Turnout|| missing||
|| Electronic Turnout|| missing||
[[/div]]

[[div style="border:solid 1px #fff;width:45%;height:20em;background:#ffffff;padding:5px;float:left;margin-bottom:4px;"]]
||||~ Anonymity||
|| Separate Machines|| 0||
|| Pre-election|| 1||
|| Election|| 0||
|| Post Casting || 0||
|| Other|| missing||
|| Comments|| Leotine Leober||
[[/div]]

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License