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"

+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

It goes against the grain of modern education to teach children to program. What fun is there in making plans, acquiring discipline in organizing thoughts, devoting attention to detail and learning to be self-critical? – Perlis

+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"

+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