28172 sujets

CSS et mise en forme, CSS3

Comment aligner sur ma deuxieme ligne de grille ?

Bonjour, je profite d'un peut de creux pour me mettre à jour sur css et les grid en particulier.
Quelque chose m’échappe.
J'aimerais aligner le contenu de mes colonnes 2 et 3 sur la deuxième ligne de ma colonne 1.
Mais je n'y arrive pas.
Alors, les trois colonnes sont contenu dans un bloc qui est en grid jusqu'ici sa va et j'ai crue comprendre que les sous itemes eux n'était pas des éléments de grid. donc j'ai mis mes trois colonnes en grid aussi.
Je place une image de ce que j'aimerais obtenir :
https://s10.postimg.org/ed708g22x/zen_Garden.png
Et un lien sur le codpen pour regarder:
https://codepen.io/ali13/full/aqQxMe
Modifié par Raphael (28 Feb 2018 - 16:36)
Administrateur
Bonjour,

L'image ne s'affiche pas Smiley ohwell

Et je n'ai pas compris cette partie : "j'ai crue comprendre que les sous itemes eux n'était pas des éléments de grid. donc j'ai mis mes trois colonnes en grid aussi."
Merci raphael.

En fait voilà le la contrainte.
j'ai un bloc conteneur qui contiens trois bloc qui contiennent les éléments sur lequel je souhaiterais m'aligner.

Mais l'image s'affiche normalement maintenant.
l'image
sinon j’essaie une description

.bloc-wrapper contiens trois bloc qui sont:
Le bloc .Intro
Le bloc .Main
Le bloc .Sidebar
Dans le bloc .Intro il y a des blocs dont le header et deux autres blocs.
Ce que j'aimerais c'est aligner les éléments de .Main et de .Sidebar sur la deuxième ligne de .Intro.
Ce que tu as produits est effectivement ce que j'aimerais mais en conservant les bloc conteneur que sont .Intro, .Main et .Sidebar.

Après c'est peut être pas possible.
Merci A+
Modifié par ali13 (28 Feb 2018 - 20:07)
Bonjour,

Peut être qu'en pur Css, cela n'est pas possible.
Mais cela me semble possible en Javascript, en récupérant la hauteur de .intro.header et en l'assignant à .Sidebar.vide et .Main.vide

.vide étant par exemple un <div> vide qui à le même margin-bottom que .header
Ce qui donnerais avec Jquery :
$( document ).ready(function() {
var iHeight = $(.intro.header).innerHeight();
$(.Sidebar.vide).height(iHeight );
$(.Main.vide).height(iHeight );
});
Modifié par aliasdmc (01 Mar 2018 - 18:50)
Sujet clos
Aller à