Propriétés inline-block et max-width ?

Aligner deux divs sur une même ligne

L'auteur de ce sujet a trouvé une solution à son problème.
Auteur du sujet

Bonjour,

je cherche à aligner deux <div> sur une même ligne horizontale.

Le problème est que ceux-ci n'ont pas de valeur width fixe, mais une valeur max-width.

L'avantage est que ça "fonctionne" quelle que soit la taille d'écran de l'utilisateur.

Voici le code :

1
2
.gauche {background:red;display:inline-block;max-width:700px;}
.droite {background:blue;display:inline-block;max-width:400px;}
1
2
3
4
5
<div class="gauche">
a
</div><div class="droite">
a
</div>

Voici le rendu : https://jsfiddle.net/rp67ymLq/

Le problème est que les divs ne prennent pas toute la place, vu qu'il n'y a pas de width ou min-width spécifié.

J'ai aussi essayé en faisant ça :

1
2
.gauche {background:red;display:block;max-width:700px;}
.droite {background:blue;display:block;max-width:400px;}

Là ça prend toute la place, mais ils ne sont plus alignés horizontalement.

Il faut alors rajouter un float, ce qui me ramène au point de départ.

Avez-vous une solution pour garder l'affichage "dynamique" tout en résolvant ce problème d'affichage ?

Merci !

+0 -0

Cette réponse a aidé l'auteur du sujet

Salut,

Je n'ai pas d'ordi sous la main pour tester, mais ça me semble plus logique d'avoir un parent et les deux divs avec des pourcentages (pourcentages qui s'additionnent à 100) comme largeur.

Édité par tleb

My programming language is the best. My programming language is useful in all situations. My programming language has no flaws. – Falsehoods

+2 -0

Cette réponse a aidé l'auteur du sujet

Ajout d'une div englobante dans le code HTML.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<div id="container">

  <div class="gauche">
    gauche
  </div>

  <div class="droite">
    droite
  </div>

</div>

Le CSS avec flexbox.

1
2
3
4
5
6
7
8
#container {
  display: flex;
  margin: 0 auto;
  width: 1100px;
}

.gauche {background:red; width:700px;}
.droite {background:blue; width:400px;}

Pour le responsive faut gérer avec les medias queries.

HTTP/1.1 418 I’m a teapot

+0 -0

A noter que ce n'est pas float: flex; mais display: flex (ou alors, j'ai effectivement raté un autre pan du CSS?)

Oulà oui tu as raison bien sur ! Je corrige ça tout de suite :p

"Toute extrapolation est valide dès lors que son résultat m’est sympathique." Loi de Lomborg

+0 -0
Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte