débutant

Par Cyril Richter, il y a 10 ans

Les bases HTML/CSS

Bonjour, je suis en train de passer les exercices de openclassroom, je n'en suis qu'au tout début et je cale déja, c'est pour structurer mon texte,

je ne sais pas quelles fonctions utilisée pour faire 3 bloques, comme dans l'image
http://www.cjoint.com/c/FAmawUzZ8Qy

cyril

4 réponses

anassfx, il y a 10 ans

Dans ton fichier css tu précises Nombre de colonnes (column number) :
.test{
-moz-column-count: 3;
-webkit-column-count: 3;
-o-column-count: 3;
column-count: 3;
ensuite le Gap entre les colonnes (column gap) :
-moz-column-gap: 20px;
-webkit-column-gap: 20px;
-o-column-gap: 20px;
column-gap: 20px;
et si tu veux ajouter une bordure entre les colonnes en precisant taille de la bordure (border size) , couleur de la bordure (border color) et enfin le style de la bordure (border style) qui est dotted dans l'exemple :
-moz-column-rule: 1px dotted #cbcefb;
-webkit-column-rule: 1px dotted #cbcefb;
-o-column-rule: 1px dotted #cbcefb;
column-rule: 1px dotted #cbcefb;
}

<div class="test">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum adipisci culpa officiis quam quasi et eaque voluptatibus explicabo, minima, dignissimos distinctio ex cum, minus doloribus possimus saepe voluptate laboriosam animi.
</div>

tu peux voir ou tester le résultat ici : http://codepen.io/anon/pen/bERLGV

MrCastor, il y a 10 ans

Tu peux faire ça très simplement avec des float aussi :
HTML

<div class="col-container"> <div class="col col-gauche">Ta colonne de gauche</div> <div class="col col-centre">Ta colonne du centre</div> <div class="col col-droite">Ta colonne de droite</div> </div>

CSS

.col-container { float: left; width: 100%; } .col { float: left; margin-right: 20px; //tes goutières width: calc(100% / 3 - 40px / 3); //(ta largeur totale / 3 blocs) - ( 2 x tes goutières / 3 blocs) } .col.col-droite { margin-right: 0; }
MrCastor, il y a 10 ans

Ton fichier css n'est pas bien chargé.
Vérifie le chemin vers le fichier.