Afficher des paragraphes sur plusieurs colonnes

Invité · 31/12/2014, 17h14

Bonjour,

J'ai déjà vu le sujet suivant mais ça ne correspond pas à ce que je souhaite faire:
http://designshack.developpez.com/tu...ples-colonnes/

Ce que je souhaite faire c'est avoir un premier paragraphe dans une colonne et le suivant dans une deuxième colonne.

Exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<p>texte 1<br>texte 2<br>texte 3</p>
<p>texte 4<br>texte 5</p>
<p>texte 6</p>
<p>texte 7</p>

Ce code devrait afficher quelque chose comme ceci:

texte 1 texte 4
texte 2 texte 5
texte 3
texte 6 texte 7

Est-ce possible de le faire simplement ? J'ai l'impression qu'il faudrait utiliser 2 classes différentes pour chacun des paragraphe.
Est-ce aussi possible de tout afficher sur une seule colonne si la largeur de l'affichage est faible (un peu comme un "max-width") ?

Merci d'avance

**Muchos** · 01/01/2015, 00h13

Je propose deux solutions.

La première reprend le tuto CSS3 avec MULTICOL. Je trouve que c'est la plus élégante :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html dir="ltr" lang="fr-FR">
<head>
  <meta charset="UTF-8" />
  <title>Paragraphes flottants avec COLUMN COUNT</title>
  <style type="text/css">
div {
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
  width: 33%;
  margin: 1ex;
  border: thin dotted black;
}
p {
  margin: 0;
}
 
@media (max-width:800px) {
div {
  -moz-column-count: 1;
  -webkit-column-count: 1;
  column-count: 1;
  width: auto;
}
}
  </style>
</head>
<body>
  <div>
    <p>texte 1<br>texte 2<br>texte 3</p>
    <p>texte 4<br>texte 5</p>
  </div>
  <div>
    <p>texte 6</p>
    <p>texte 7</p>
  </div>
</body>
</html>

La seconde solution utilise des classes :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html dir="ltr" lang="fr-FR">
<head>
  <meta charset="UTF-8" />
  <title>Paragraphes flottants avec des classes</title>
  <style type="text/css">
div {
  float: left;
  width: 33%;
  border: thin dotted black;
}
span:empty {
  display: block;
  clear: left;
}
 
@media (max-width:800px) {
div {
float: none;
}
}
  </style>
</head>
<body>
  <div>
    <p>texte 1</p>
    <p>texte 2</p>
    <p>texte 3</p>
  </div>
  <div>
    <p>texte 4</p>
    <p>texte 5</p>
  </div>
 
  <span></span>
 
  <div>
    <p>texte 6</p>
  </div>
  <div>
    <p>texte 7</p>
  </div>
</body>
</html>

Invité · 01/01/2015, 08h32

Bonjour,
3ème solution :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<div class="txt2col">
  <div>
     <p>texte 1<br>texte 2<br>texte 3</p>
     <p>texte 4<br>texte 5</p>
  </div>
  <div>
    <p>texte 6</p>
    <p>texte 7</p>
  </div>
</div>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.txt2col { display:table; }
.txt2col > div { display:table-row; width:50%; }
.txt2col > div > p { display:table-cell; }

Invité · 01/01/2015, 12h05

Merci pour vos réponses, c'est enrichissant pour un débutant

@Muchos : merci, je préfère aussi la 1ère méthode

@jreaux62 : je ne savais pas qu'on pouvait faire des tableaux de cette façon en css

[Edit] Finalement, je vais partir sur la 2ème solution

1ère solution : finalement, il y a un petit problème d'affichage s'il y a trop d'élément dans le 1er paragraphe
Dans l'exemple ci-dessous, le "texte 5" s'affiche dans la colonne de droite au lieu de celle de gauche

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html dir="ltr" lang="fr-FR">
<head>
  <meta charset="UTF-8" />
  <title>Paragraphes flottants avec COLUMN COUNT</title>
  <style type="text/css">
body {
  background-color: #777777;
}
div {
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
}
p {
  background-color: #ffffff;
  padding: 10px;
  border-radius: 10px;
  margin: 10px auto;
}
 
@media (max-width:800px) {
  div {
    -moz-column-count: 1;
    -webkit-column-count: 1;
    column-count: 1;
    width: auto;
  }
}
  </style>
</head>
<body>
  <div>
    <p>texte 1<br>texte 2<br>texte 3<br>texte 4<br>texte 5</p>
    <p>texte 6<br>texte 7</p>
  </div>
  <div>
    <p>texte 8</p>
    <p>texte 9</p>
  </div>
</body>
</html>

2ème solution : l'affichage est bien mieux.
J'aimerais par contre savoir s'il était possible d'utiliser le "max-width" ? J'essaie mais sans succès

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html dir="ltr" lang="fr-FR">
<head>
  <meta charset="UTF-8" />
  <title>Paragraphes flottants avec des classes</title>
  <style type="text/css">
body {
  background-color: #777777;
}
p {
  background-color: #ffffff;
  float: left;
  width: 45%;
  padding: 10px;
  border-radius: 10px;
  margin: 10px;
}
span:empty {
  display: block;
  clear: both;
}
 
@media (max-width:800px) {
  p {
    float: none;
    width: 90%;
  }
}
  </style>
</head>
<body>
    <p>texte 1<br>texte 2<br>texte 3<br>texte 4<br>texte 5</p>
    <p>texte 6<br>texte 7</p>
  <span></span>
    <p>texte 8</p>
    <p>texte 9</p>
</body>
</html>

3ème solution : je n'arrive pas à avoir de l'espace entre chaque "case" du tableau.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html dir="ltr" lang="fr-FR">
<head>
  <meta charset="UTF-8" />
  <title>Paragraphes flottants avec table</title>
  <style type="text/css">
body {
  background-color: #777777;
}
p {
  background-color: #ffffff;
  padding: 10px;
  border-radius: 10px;
  margin: 10px;
  width: 90%;
}
 
@media (min-width:800px) {
  .txt2col { display:table; }
  .txt2col > div { display:table-row; }
  .txt2col > div > p { display:table-cell; }
}
 </style>
</head>
<body>
<div class="txt2col">
  <div>
    <p>texte 1<br>texte 2<br>texte 3<br>texte 4<br>texte 5</p>
    <p>texte 6<br>texte 7</p>
  </div>
  <div>
    <p>texte 8</p>
    <p>texte 9</p>
  </div>
</div>
</body>
</html>