27500 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

J'ai un petit problème qui concerne la taille d'une div.
J'ai crée un petit blog, et lorsque je me connecte, 4 divs apparaissent sur la largeur de la page.
La première est à gauche et mesure 25%. Elle est vide. La deuxième contient le billet et mesure 50%, la troisième est à droite et contient l'administration du blog (modifier/supprimer).
La quatrième englobe le tout et est en display: flex; justify-content: space-between;
J'ai actuellement un margin-right: 3rem; sur la troisième div. Sa longueur a donc été modifié en width: calc(25% - 3rem);
Je voudrais enfaite que la div n°3 soit à une distance proportionnellement identique de la div n°2 quelque soit la longueur de la page, mais je ne sais pas comment faire.

Merci de votre aide !
Salut, il nous manque un petit schéma du résultat attendu. Perso, je ne comprends pas exactement comment tu veux afficher tes colonnes.
Ca ne doit pas être très compliqué mais là, pas assez d'infos.
Non, c'est hyper symple.
upload/1619986119-82357-alsacreation.jpg
Ceci est ce que j'ai et c'est ce que je veux.
Or, lorsque l'on rétréci la page, j'obtiens :
upload/1619986166-82357-capture.jpg
Comme vous le voyez, la div d'administration s'est rapproché de l'article, car la fenêtre s'est rétréci.
Je voudrais qu'elle reste à égale distance de l'article.

Mon code html :
<div class="div-administration-blog">
     <div class="article"></div>
     <div class="administration-blog"><a href="" class="administration-blog-liens">modifier le billet</a><br><a href="" class="administration-blog-liens">supprimer le billet</a></div>
</div>

Css :
.div-administration-blog{display: flex; justify-content: space-between;}
.administration-blog{font-size: 1.4em;margin: auto;width: calc(25% - 5vw);margin-right:5vw;text-align: center;}
.article{margin:auto;width: 50%;margin-left:25%;text-align: center;}

Merci
Modifié par Louis_9876 (02 May 2021 - 22:24)
Modérateur
Salut,

le soucis ici c'est que tu a centré tes boutons. Si tu enleve le text-align: center; de administration-blog tu devrait avoir le comportement souhaité non ?
Pour faire ca tu peux rajouter un block qui ca englober tes deux boutons. le block sera aligné a gauche mais tes boutons seront centré dedans :
https://jsfiddle.net/undless/gj29fLkx/

Sinon tu peux jouer avec le grid : https://jsfiddle.net/undless/vjp5gt04/

Bonne journée
Meilleure solution
Aïe, c'était tout simple.
J'ai enlevé le text-align: center; , mis un margin-right: 2rem; à .article et le tour est joué.
Sans oublier le width: calc(50% + 2rem); et le display inline-block du wraper.
Merci beaucoup !
EDIT : Je viens de voir l'affichage en display: grid; et c'est exactement ce dont j'ai besoin pour faire un système d'actualités, pour pas que ce soit aligné verticalement comme avec mon blog.
Modifié par Louis_9876 (03 May 2021 - 19:54)