Incompatibilté entre inline-block et max-width

Bonjour

J'ai 2 divs que je voudrais placer l'un en-dessous de l'autre, pour cela j'utilise la propriété inline-block pour chacun des divs:

Code:

---

1 2 3 4 5 6 7

.div1 { display: inline-block ; }   .div2 { display: inline-block ; }

---

Et ça marche. Sauf que lorsque j'ajoute un max-width, les 2 divs se retrouvent sur la même ligne.

Code:

---

1 2 3 4 5 6 7 8 9

.div1 { display: inline-block ; max-width: 100px; }   .div2 { display: inline-block ; max-width: 100px; }

---

Comment régler ce problème?

Bonjour,

Si tu souhaites placer des blocs l'un en dessous de l'autre, c'est le comportement par défaut d'un block
Le fait de le passer en inline-block va justement provoquer le fait qu'ils sont juste à côté l'un de l'autre.

Donc si tu veux forcer leur superposition, utilise plutôt "display:block"; (et si tu utilises des <div> tu n'as rien à faire car ce sont déjà des display: block par défaut :))

Sauf que quand je mets "block" au lieu de "inline-block", le "max-width" agrandit le div au maximum, même lorsque le contenu est petit.

Voici des captures d'écran:

1er cas:

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

.div1 { background-color:red; max-width:780px; display: block ; }   .div2 { background-color:yellow; max-width:780px; display: block ; }

---

Pièce jointe 513106

2e cas:

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

.div1 { background-color:red; max-width:780px; display: inline-block ; }   .div2 { background-color:yellow; max-width:780px; display: inline-block ; }

---

Pièce jointe 513112

Donc j'aurais pu utiliser un <br> juste après le 1er div mais je souhaiterai m'en passer.

Bonjour,

Je pense qu'il y a une partie de ton code que tu ne nous montre pas et c'est ça qui provoque le problème.

Voici un essai réalisé sur base de ton code : https://tests.pierre-roels.com/max-width.php
On voit bien que les max-width sont respectés, peu importe ce qu'il y a dedans

Et voici le code complet de la page :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<style>     .div1, .div2 {         display: block;         padding: 15px;     }     .div1 {         background-color:red;         max-width:780px;            }       .div2 {         background-color:yellow;         max-width:380px;     } </style> <div class="div1">div1</div> <div class="div2">Lorem ipsum dolor sit amet</div>

---

Bonjour,

Ce n'est pourtant pas bien compliqué...

1- La solution la plus simple : un simple <br /> !

Code:

---

1 2 3

<div class="div1">div1</div> <br /> <div class="div2">Lorem ipsum dolor sit amet</div>

---

2- Une autre solution serait de mettre un <div> vide entre les deux :

Code:

---

1 2 3

<div class="div1">div1</div> <div></div> <div class="div2">Lorem ipsum dolor sit amet</div>

---

3- ou encadrer chacun par des <div> :

Code:

---

1 2 3 4 5 6

<div> <div class="div1">div1</div> </div> <div> <div class="div2">Lorem ipsum dolor sit amet</div> </div>

---

Code:

---

1 2 3 4 5 6 7

.div1, .div2 { display: inline-block; padding: 15px; max-width:780px; } .div1 { background-color:red; } .div2 { background-color:yellow; }

---

N.B. Contrairement au <br />, cette 3ème solution est plus "flexible", et permet éventuellement de modifier facilement la mise en page selon la largeur de fenêtre.

salut,
met dans chaque balise float:none; c'est elle qui force la div a ne pas être à cote d'un autre élément ,par contre float:left ou float:right met le div a gauche ou a droite de l’élément qui le suit dans le code.

Code:

---

1 2 3 4 5 6 7

.div1{ float:none; } .div2{ float:none; }

---

Merci beaucoup, toutes les méthodes que vous m'avez proposées marchent.

Tiens,

une 4ème solution *, très simple :

Code:

---

1 2 3

<div class="div1"><span>div1</span></div>   <div class="div2"><span>Lorem ipsum dolor sit amet</span></div>

---

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13

.div1 > span, .div2 > span { display:inline-block; padding: 15px; } .div1 > span { background:red; font-size:140%; color:white; } .div2 > span { background:yellow; color:red; }

---

* une variante de la 3ème, en mettant les classes sur les div parents.