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

Aligner deux divs sur une même ligne

a marqué ce sujet comme résolu.
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

“Your manuscript is both good and original. But the part that is good is not original, and the part that is original is not good.” Samuel Johnson

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

“Your manuscript is both good and original. But the part that is good is not original, and the part that is original is not good.” Samuel Johnson

+0 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

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