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

Tu devrais regarder du coté de la propriété display :flex qui devrait résoudre ton problème :)

https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/la-mise-en-page-avec-flexbox

Édité par Demandred

"Il est vraiment regrettable que tous les gens qui savent parfaitement comment diriger un pays soient trop occupés à conduire des taxis et à couper des cheveux", George Burns

+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

Writing your own code is superior to using someone else’s. Using someone else’s code is superior to writing your own. – 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

"Il est vraiment regrettable que tous les gens qui savent parfaitement comment diriger un pays soient trop occupés à conduire des taxis et à couper des cheveux", George Burns

+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