28112 sujets

CSS et mise en forme, CSS3

[Résolu] Calc() ne fonctionne pas et souci alignement div

Bonjour,
Je souhaite afficher et aligner horizontalement 3 div (
.contes2021, .sorties2021, .ateliers2021
) dans une section 
.activites
..... et cela ne fonctionne pas ! Je dois être aveugle et ne pas voir où cela pêche !
Quelqu'un pour m'aider ? merci

Mon code (en rem) :


.activites{
   min-height: 25.62rem; 
    width:64rem; /* etait 100%   64rem = 1024px */
    text-align: center;
    margin:auto;
    background-color: pink; /* pour distinguer la div */
}

.contes2021, .sorties2021, .ateliers2021{
   width: 14.06rem; /*(calc100% / 3); ne fonctionne pas !  14.06rem = 225px*/
   margin:auto; 
  min-height: 18.375rem;
 background-repeat: no-repeat; 
text-align:center;
color:#FFFFFF
}
 
.contes2021{
    background-image: url('images/ACCUEIL_CONTE_410PX.jpg');   
}
.sorties2021{
    background-image: url('images/ACCUEIL_THEATRE_410PX.jpg'); 
}
.ateliers2021{
    background-image: url('images/ACCUEIL_EXPO_410PX.jpg');
}
Modérateur
Salut,

Alors déjà pour aligner 3 div avec seulement leur largeur il faut les passer en inline-block car par défaut elles sont en block. Ensuite il faut gérer les espaces insécables : https://www.alsacreations.com/astuce/lire/1432-display-inline-block-espaces-indesirables.html et calc100% / 3 s'écris calc(100% / 3) Smiley lol

Et sinon, tu peux opter pour une mis en page en flex pour simplifier tout ca et pas te prendre la tete du tout :

.wrapperflex {
  display: flex;
}
.contentflex {
  flex: 1;
}

https://jsfiddle.net/undless/nc6t2a31/
Meilleure solution
Merci, je me doutais que j'avais une erreur de syntaxe.
Je n'osais pas utiliser "flex" car je rénove le site d'une association dont la plupart des membres, assez âgés n'ont pas récemment mis à jour leurs navigateurs.
Erreur réparée.
Modérateur
Horetol a écrit :
Je n'osais pas utiliser "flex" car je rénove le site d'une association dont la plupart des membres, assez âgés n'ont pas récemment mis à jour leurs navigateurs.

Le support de Flexbox te préocuppe et pas celui de calc() ? Smiley lol Si c'est pour les IE je pense que ca se vaut... ou alors si tu veux vraiment etre sur, tu parts sur un width:33.33333%; en dur ou encore sur un table...

Bonne journée !
Sujet clos
Aller à