Discussion :

[patrick754]

Bonjour à tous
Je viens demander votre aide afin de trouver une solution à mon problème.
J'ai 2 texte sur la même ligne et j'aimerai placer la première a gauche et la seconde à droite. Tout mes essais n'ont rien donné, je demande votre aide.
Ci dessous mon code html :

Code HTML :

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

1
2
3
4
<div class="row">
	<h4 class="left">placer à gauche</h4>
	<h4 class="right">placer à droite</h4>
</div>

Merci d'avance

[mathieu]

montrez nous le code css que vous avez essayé.

[patrick754]

Bonjour Mathieu et merci pour l'intérêt.
Pour la gauche :

Code :

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

1
2
3
.left {
text-align : left
}

La droite

Code :

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

1
2
3
.right {
text-align : right
}

Merci

[laurentSc]

Bonsoir,

je suis fort loin d'être un expert CSS, mais je dirais qu'un bon début serait d'ajouter la règle :

Code css :

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

1
2
3
4
.row
{
display:flex;
}

[laurentSc]

La nuit porte conseil

Code html :

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

1
2
3
4
5
6
<div class="table">
    <div class="table-row">
        <h4 class="table-cell">placer à gauche</h4>
        <h4 class="table-cell">placer à droite</h4>
    </div>
</div>

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
.table{
    display:table;
}
 
.table-row{
    display:table-row;
}
 
.table-cell {
    display:table-cell;
    width:300px;
}

[NoSmoking]

Bonjour,

La nuit porte conseil

pourquoi ?
Ta solution avec display:flex est tout autant élégante et moins verbeuse !

Code :

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

1
2
3
4
5
6
.row {
  display: flex;
}
.left {
  flex: 1 0 auto;  /* pousse l'élément suivant à droite */
}

[laurentSc]

En effet ; mais j'étais justement en train de m'intéresser au display:table and co pour remplacer la vieille méthode où on utilise la balise html <table> et l'idée m'est venue d'utiiser cette technique mais oui, pour le cas de patrick754, ton approche est mieux (pas pour le mien !)

[patrick754]

Bonjour à tous
Merci pour vos propositions qui m'ont permise d'avancer.
Toutes les propositions marchent mais finalement j'ai retenu la proposition de NoSmoking.

Grand merci

Cordialement

[NoSmoking]

Toutes les propositions marchent mais finalement j'ai retenu la proposition de NoSmoking.

Solution initiée par laurentSc, voir la réponse #4

[laurentSc]

Solution initiée par laurentSc

Pour un nul en CSS, y a de quoi apprécier ! (avec le temps, plus tout à fait nul on dirait)