28172 sujets

CSS et mise en forme, CSS3

[Résolu] Grille fluide avec colonnes de même hauteur

Tout est dit dans le titre ! Je voudrais avoir mes 3 colonnes à la même hauteur.

Pour ce la je pense qu'il faudrait que les div enfant prennent la hauteur du div parent...mais je ne trouve pas la solution en CSS et je ne souhaite pas faire ça en Jquery !

Merci d'avance à celui ou celle qui trouvera la réponse !

HTML

<div class="row">
    <div class="col-4-xl">
    <div class="main-skills">
        <h4>Titre 1</h4>
            <p>Illud tamen clausos vehementer angebat quod captis navigiis, quae frumenta vehebant per flumen...</p>
        <div class="get-detailed-skills">En savoir plus...</div>
        </div>
    </div>
                                     
    <div class="col-4-xl">
    <div class="main-skills">
            <h4>Titre 2</h4>
        <p>Iamque lituis cladium concrepantibus internarum non celate ut antea turbidum saeviebat ingenium a veri consideratione detortum et nullo inpositorum vel conpositorum fidem sollemniter inquirente nec discernente a societate noxiorum...</p>
        <div class="get-detailed-skills">En savoir plus...</div>
        </div>
    </div>
                                     
    <div class="col-4-xl">
    <div class="main-skills">
            <h4>Titre 3</h4>
        <p>Accedebant enim eius asperitati, ubi inminuta vel laesa amplitudo...</p>
        <div class="get-detailed-skills">En savoir plus...</div>
    </div>
    </div>   
</div>


CSS


.row {
    margin: 0 -10px;
    zoom: 1;
}
 
.row:before, .row:after {
    content: "";
    display: table;
}
 
.row:after {
    clear: both;
}
 
col-4-xl {
    float: left;
    position: relative;
    min-height: 1px;
    padding: 0 10px;
}
 
.main-skills {
    padding: 15%;
    font-family: "Open Sans",sans-serif;
    font-weight: 400;
    margin: 3% 0;
    height: 100%;
}


RENDU (désolé le site est en local)

upload/57142-colonnes.jpg
Bonjour,

J'ai pas testé mais si tu changes ton code html comme cela ça donne quoi ?
<div class="row">
    <div class="main-skills col-4-xl">
        <h4>Titre 1</h4>
            <p>Illud tamen clausos vehementer angebat quod captis navigiis, quae frumenta vehebant per flumen...</p>
        <div class="get-detailed-skills">En savoir plus...</div>
    </div>
                                     
    <div class="main-skills col-4-xl">
            <h4>Titre 2</h4>
        <p>Iamque lituis cladium concrepantibus internarum non celate ut antea turbidum saeviebat ingenium a veri consideratione detortum et nullo inpositorum vel conpositorum fidem sollemniter inquirente nec discernente a societate noxiorum...</p>
        <div class="get-detailed-skills">En savoir plus...</div>
    </div>
                                     
    <div class="main-skills col-4-xl">
            <h4>Titre 3</h4>
        <p>Accedebant enim eius asperitati, ubi inminuta vel laesa amplitudo...</p>
        <div class="get-detailed-skills">En savoir plus...</div>
    </div>  
</div>

Tu as renseigné .main-skills 100% de height. Le soucis c'est qu'il se base sur la div parente qui est col-4-xl et non sur la div row.
Bonjour,

si tu te sert de display:table pour dégager tes flottant, autant dégager les flottant et faire du display:table , non ?

http://codepen.io/anon/pen/OPgppo

.row {
  display:table;
  table-layout:fixed;
  border-spacing:10px;
  width:600px;
  background:lightgray;
}
 
.row:before, .row:after {
 /* nop */
}
 
.col-4-xl {
  display:table-cell;
  padding: 0 10px;
  background:#3598DC;
  color:white;
  width:33%;
}


:)
Merci pour vos solutions et désolé pour ma réponse tardive !

@gc-nomade : Effectivement supprimer les flottants est une bonne solution ! En revanche ses flottants me sont malheureusement utiles sur plusieurs éléments de ma mise en page (et sur plusieurs modèles de pages différents). Cependant j'adopte ta solution en affectant ces 2 éléments à deux nouvelles class auxquelles j’attribue les règles CSS que tu me suggère. Donc merci mille fois !

@Raphi : Ta proposition me plaisait bien car elle ne générait que très peu de changement ! Dommage ça ne marche pas...merci beaucoup pour ta proposition cela dit !

Pour le coup j'ai une nouvelle question ! Je souhaiterai aligner les "En savoir plus..." correspondant à la class get-detailed-skills.

Quelqu'un aurait-il une idée ?

Merci encore à vous
Pur_Web a écrit :


Pour le coup j'ai une nouvelle question ! Je souhaiterai aligner les &quot;En savoir plus...&quot; correspondant à la class get-detailed-skills.

Quelqu'un aurait-il une idée ?

Merci encore à vous


oui, display:flex;

http://codepen.io/gc-nomade/pen/gbxbyQ

voir le tuto d'ici: http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html et sur css-tricks en anglais et complément: http://css-tricks.com/snippets/css/a-guide-to-flexbox/ - http://css-tricks.com/almanac/properties/f/flex/
++
Merci beaucoup pour ces réponses ! Finalement je pense que je dois me tourner vers une solution qui conserve les flottants. Je n'arrive pas à faire du responsive, basé sur un système de grille fluide, avec display:table. Plus concrètement je souhaiterai utiliser le même type de class (row et col-nbre_colonnes-format_ecran) que j'avais utilisé lorsque j'ai fais le site suivant : http://pharmacielemonnier.fr/ Cela me permettait une grande souplesse pour le responsive. L'exemple présent se rapproche des éléments présents dans la section "SERVICES", la seule différence est qu'il n'y a pas de background-color, donc le fait que les éléments ne soient pas de même hauteur ne pose aucun problème ! En espérant être claire... Je marque le sujet en résolu mais si il y a une bonne idée je suis preneur ! Merci encore pour l'aide.
Sujet clos
Aller à