Insérer une ligne verticale dans une div

**soeursourire** · 07/07/2016, 09h56

Bonjour,
Je souhaite insérer une ligne verticale dans une div dont je ne connais pas la hauteur à l'avance.
Je pensais faire comme suite, mais le problème est que je dois apparemment mettre height en pixel (dans .content:after), si je mets en pourcentage cela ne fonctionne pas...
Une idée?

Code :

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
.content {
	position: relative;
	margin: auto !important;
	width: 67% !important;
	font-size: 18px !important;
	font-weight: normal !important;
	color: #555554;
	background-color: #FFF;
	border-top : 1px solid #e7e6e6; 
	border-bottom: 1px solid #e7e6e6; 
}
.content:after {
	position: absolute;
	content: '';
	width: 1px;
	height: 100%;
	top: 0;
	bottom: 0;
	left: 50%;
	border: 1px solid black;
}

**Ecared** · 07/07/2016, 11h23

Salut,

Non ton code est bon c'est juste que de base ta div .content a une height de 0 et donc ton :after ne s'affiche pas, si tu mets une min-height à .content ou que tu la rempli un peu de texte ta ligne verticale apparaîtra bien.

**soeursourire** · 07/07/2016, 12h31

Merci pour ta réponse mais pourtant j'ai bien du texte (et meme des images) dans ma div .content ...
J'ai essayé le min-height mais sans succès.. en plus ça me réduit mon .content en hauteur alors que ce n'est pas ce que je veux...
Le pire c'est que je vois le plus point noir en haut de mon content mais le trait ne descend pas plus bas..

**soeursourire** · 07/07/2016, 13h19

J'utilise aussi Bootstrap pour avoir un contenu à droite et à gauche.. c'est peut-être à cause de ça que cela ne marche pas?

Invité · 07/07/2016, 13h54

Bonjour,

1/ du code CSS n'a d'intérêt qu'avec le code HTML associé.

2/ Si tu ne nous montres pas un exemple fonctionnel, reproduisant le problème, on ne peut rien de plus pour toi.

3/ Et explique-nous aussi le but de la manoeuvre : il existe peut-être une meilleure solution.

4/

Envoyé par soeursourire

...Bootstrap pour avoir un contenu à droite et à gauche..

C'est-à-dire ? code ? copie d'écran ? ...

5/ enfin, si c'est juste une ligne :

Code css :

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

	border-left: 1px solid black;

**soeursourire** · 07/07/2016, 14h04

Ok alors voici mon soucis et un code plus simple pour vous montrer:

J'ai une div content qui contient deux (voir 3) sous contenus (content-left et content-right).
Je ne sais pas à l'avance ce que contiendra chaque sous contenu en taille (donc je ne connais pas leur hauteur).
Mais mes sous-contenus ont une bordure (donc j'ai mis une bordure en haut et en bas de content, ça c'est bon) mais je dois aussi avoir une séparation entre mes deux sous-contenus (et bien sûr qu'en cas d'écran assez large parce que si je passe en smartphone la séparation verticale doit disparaitre.

Donc pour avoir des sous-contenus de meme hauteur, il y avait comme solution: utiliser table-cell display (impossible pour moi car je suis en responsive), ajouter la ligne verticale avec .content:after... ?

Code :

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
45
46
47
48
49
50
51
52
53
 
<html>
<head>
<!--script>alert('tot\'o')</script-->
<style>
.content {
	position: relative;
	margin: auto !important;
	width: 67% !important;
	font-size: 18px !important;
	font-weight: normal !important;
	color: #555554;
	background-color: #FFF;
	border-top : 1px solid #e7e6e6; 
	border-bottom: 1px solid #e7e6e6; 
}
.content:after {
	position: absolute;
	content: '';
	width: 1px;
	height: 100%;
	top: 0;
	bottom: 0;
	left: 50%;
	border: 1px solid black;
}
.content-left {
	float: left;
}
.content-right {
	float: right;
}
</style>
</head>
<body>
<div class="content">
	<div class="content-left">
		blgfrfhggfhgf
		thgfh<br>
		fdhghf<br>
		thgfh<br>
		fdhghf<br>
		thgfh<br>
		fdhghf<br>
	</div>
	<div class="content-right">
		blgfrfhggfhgf
		thgfh
		fdhghf
	</div>
</div>
</body>
</html>

Peut-être que la solution est plutôt de passer par ce code:

utiliser ce code quand l'écran est plus grand que le smartphone:

Code :

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

1
2
3
4
5
6
7
8
@media (min-width: 768px){
	.content{
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
	}	
}

Invité · 07/07/2016, 14h07

Bon.

Les éléments flottants (float) "sortent" du flux.

Il existe plusieurs moyen de rétablir le flux : Rétablir le flux après des éléments flottants en CSS sans balise HTML supplémentaire

1/ Le plus simple :

Code css :

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

1
2
3
4
5
6
7
8
.content {
	overflow:hidden;
...
}
.content:after {
...
	border-left: 1px solid black;
}

2/ un autre : ajouter une classe "clearfix" :

Code html :

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

<div class="content clearfix">

Code css :

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

1
2
.clearfix:before, .clearfix:after { display:table; content:""; }
.clearfix:after { clear:both; }

MAIS dans ton cas précis, ça ne fonctionne pas, puisque tu utilises DEJA :after...

Insérer une ligne verticale dans une div

Tableau en CSS

Discussions similaires

Partager

Partager