1485 sujets

Web Mobile et responsive web design

Pour aligner 2 div ayant une width de 50%..





[Résolu] Display: inline-block / inline-flex et width en %

Hello tout le monde !

Je veux soulever un problème assez simple, mais assez chiant tout de même..
Vous avez 2 block, vous voulez qu'ils prennent 50% de la largeur chacun, vous souhaitez simplement les aligner.

Méthode à l'ancienne : on met les blocks en float et basta.
Méthode inline-block : plus sympa comme méthode mais un espace blanc se glisse entre nos 2 blocks, envoyant ainsi le 2e block à la ligne..

Démo

Tout content d'utiliser flexbox, je pensais que ce soucis allait être réglé avec l'arrivée de la propriété inline-flex, mais non.. le problème subsiste. Du coup, tout comme inline block, on est obligé de supprimer l'espace entre les 2 balises html (soit par un commentaire, soir en les collant) ce qui nuit à la lisibilité du code (je trouve), d'autant plus quand on a du code dynamique..


Comment gérez vous ce soucis de votre côté, utilisez vous une solution différente de celles que j'ai cité plus haut ? Ou avez vous appris à vivre avec et tant pis ?

Merci à ceux qui donneront leurs avis Smiley smile
Bonjour. Solution flexbox avec un conteneur (voir sur CodePen) :
<div class="container">
  <div></div>
  <div></div>
</div>


.container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
}
div {
  width: 50%;
  height: 100vh;
}
div:first-child {
  background: Beige;
}
div:last-child {
  background: Pink;
}
Toujours avec le même code html, solution avec display table (voir le CodePen) :
body {
  margin: 0;
}
.container {
  display: table;
  width: 100%;
}
div {
  display: table-cell;
  width: 50%;
  height: 100vh;
}
div:first-child {
  background: Beige;
}
div:last-child {
  background: Pink;
}
Super!
Merci pour toutes ces précisions, je vais pouvoir adapter mon code aux différents cas que je rencontre régulièrement. Smiley smile
Modérateur
Bonjour,

Y a un truc que je ne comprends pas. Pourquoi un simple display:flex (éventuellement avec préfixes si besoin) sur le conteneur et un flex:1 sur les div à l'intérieur ne suffirait pas ? (et cela sans qu'il soit besoin de "supprimer" l'espace dans le code entre les <div>) ?

EDIT : un jsfiddle qui me semble fonctionner http://jsfiddle.net/3hhsd0jf/

Amicalement,
Modifié par parsimonhi (15 Feb 2016 - 11:58)
Salut parsimonhi,

Que tu mettes flex:1 ou width:50%, le résultat est le même.
La seule nécessité est en effet d'avoir un display:flex; sur le bloc conteneur, ce qui peut parfois être contraignant..

Dans mon exemple, je ne prend pas en compte de conteneur, c'est la qu'apparaissent les soucis avec les espaces blancs.
Modérateur
Bonjour,

ganondorf150 a écrit :
Que tu mettes flex:1 ou width:50%, le résultat est le même.
La seule nécessité est en effet d'avoir un display:flex; sur le bloc conteneur, ce qui peut parfois être contraignant..


Je vois ! Merci pour cet éclaircissement !

Amicalement,
ganondorf150 a écrit :
La seule nécessité est en effet d'avoir un display:flex; sur le bloc conteneur, ce qui peut parfois être contraignant.

Oui et non : en effet la balise body peut servir de conteneur en cas de besoin. C.Q.F.D.
Sujet clos
Aller à