Div en "Flex" et ancre qui se comporte comme un block ?

Version imprimable

07/10/2016, 19h36
cocaaladioxine

Div en "Flex" et ancre qui se comporte comme un block ?
Bonjour à tous,

J'ai passé quelques temps à chercher sur le net et à tester diverses choses sur mon problème, mais, pateaugeant toujours dans le semoule, je me tourne vers la communauté!

Mon problème :

J'ai utilisé le display:flex; sur un div pour pouvoir centrer du contenu verticalement.
Tout va bien sauf avec les balises <a> .
Lorsque j'en insère une dans une flex box, elle se comporte (l'ancre) comme un block en float :
Elle se sépare du texte précédent, et se positionne toute seule à droite du texte. Si j'en met plusieurs dans mon texte, j'ai visuellement :
Code:

1 2 3 MON TEXTE SUR PLUSIEURS MON ANCRE DU TEXTE AUTRE ANCRE LIGNES
Est-ce que l'un d'entre vous connaitrait ce comportement et la solution à apporter???

Merci d'avance de votre aide!
07/10/2016, 20h30
Invité

Bonjour,

Ca irai mieux si tu fournissais les codes (HTML + CSS) !

2 pièce(s) jointe(s)

Bonsoir

En effet, ca sera plus simple!

Voici mon problème dans sa plus simple expression, en piece jointe.

Cordialement

test.html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title></title>
  <meta description="">
  <link rel="stylesheet" href="test.css">
  <script src=""></script>
</head>
<body>
	<section id="contacts">
		<div class="left"><div class="intitule">Contact</div></div>
		<div class="right">
			Blablabla	<br>
			Téléphone : 0452145214<br>
			Description : <a href="http://www.pagesjaunes.fr/pros/xxxxx">Mon ancre 1</a><br>
			Description 2 :  <a href="http://www.pagesjaunes.fr/pros/xxx">Mon ancre 2 </a>.
		</div>
	</section>
</body>
</html>

test.css

Code:

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
body, html
{
	margin: 0;
	padding: 0;
	font-family: 'gravitybook';
}
 
body
{
	margin-left: auto;
	margin-right: auto;
/*	max-width: 1600px; */
}
 
.right
{
	float:right;
	width: 50%;
	text-align: center;
	display: flex;
	align-items: center;
	min-height: 500px; 
}
 
.left{
	float: left;
	width: 50%;
	text-align: center;
	display: flex;
	align-items: center;
	min-height: 500px;
}
 
.intitule
{
	margin: 0 auto;
   padding: 9px;
	font-size: 1.8em;
	text-align: center;
	border: 5px solid black;
	color: black;
}

Bonjour,

display:flex; va agir sur les balises-enfant (ici : <a> et <br>).

Il suffit de tout encadrer dans une balise <p>...</p> (par exemple) :

Code:

1
2
3
4
5
6
7
8
   <div class="right">
      <p>
		Blablabla	<br>
		Téléphone : 0452145214<br/>
		Description : <a href="http://www.pagesjaunes.fr/pros/xxxxx">Mon ancre 1</a><br>
		Description 2 :  <a href="http://www.pagesjaunes.fr/pros/xxx">Mon ancre 2 </a>.
      </p>
   </div>

10/10/2016, 10h50
cocaaladioxine

Merci!

Bonjour jreaux62,

Et bien, si j'avais pensé que c'était si simple!

Merci pour ton aide, je n'allais vraiment pas vers cette solution : je pensais que l'astuce se trouvait dans une propriété CSS des ancres!
( j'en ai essayé pas mal ^^! )

Bonne journée à toi!