Card qui ne continue pas sa route

Par Los Santos Police Department, il y a 9 ans

Les bases HTML/CSS

Bonsoir,
Je souhaiterais que ma card continue son chemin ici :
Image
En bleu c'est ce que je souhaite que la card fasse

Voici mon code HTML

<main> <div class="container"> <div class="row-4"> <div class="col-12"> <div class="card"> <h1 class="card_title">Hello world #1!</h1> <div class="row"> <div class="col-6"> Hello </div> <div class="col-6"> World! </div> </div> </div> </div> </div> </div> </main>

Et mon code CSS :

.container{ width: 40%; } .card{ transition: all 0.3s cubic-bezier(.25,.8,.25,1); height: auto; } [class*="col-"] { float: left; padding: 15px 15px 0px 15px; margin-bottom: -23px; } [class*="row-"] { margin-bottom: 20px; } [class*="row-"]:last-child { margin-bottom: 0; } .col-6{ width: 50%; } .col-12{ width: 100%; }

En vous remerciant d'avance !

4 réponses

F3LENYR, il y a 9 ans

Salut Blume, je crois que ton problème viens de "[class*="col-"]" dans ton CSS, et plus particulièrement de ton "float: left", peut-tu nous donner le CSS de ton card pour être sûr que c'est ça s'il te plaît ?

J'ai fais un codepen avec (je crois) ce que tu souhaites.
http://codepen.io/anon/pen/GjKggq

Je suis pas sûr à 100% je suis encore débutant. ^^

Los Santos Police Department, il y a 9 ans

Bonsoir, merci de d´être penché sur la question. Je te file le code demain car je suis dans mon lit :D

Par contre sur le codePen, je vois que ce n´est pas ce qu´il faut car :

  1. Il faut que le bloc avec le titre englobe les deux colonnes 6
  2. Les colonnes 6 doivent rester comme elles sont sur l´image x)

Il faut juste augmenter la hauteur ("dynamiquement") du bloc (pas de height:xpx) car si le contenu est plus gros ça va déborder et si le nb de px est super grand, pour un petit contenu va paraitre petit x)

AlexJM, il y a 9 ans

Le problème c'est que lorsque tu mets un élément en float, le navigateur ne sait pas vraiment ou il se positionne et dès lors il ne compte pas sa taille dans l'élément parent
Pour se faire, il faut utiliser un clearfix
Je t'invite à te renseigner ici : http://fr.learnlayout.com/clearfix.html
Ainsi que le lien qu'ils fournissent sur le monde du clearfix

En tous les cas, je pense que ceci devrait règler ton bug :

.clearfix::before, .clearfix::after { content:""; display:table; } .clearfix::after { clear:both; } .clearfix { zoom:1; /* For IE 6/7 (trigger hasLayout) */ }

Et ensuite :

<div class="row clearfix">

Note: tu peux mettre le clearfix directement sur la class row, mais personnellement je préfère le faire ainsi, au cas ou tu en aurais besoin autre part

Los Santos Police Department, il y a 9 ans

@AlexJM Bonjour, merci de t'être penché sur la question !
Alors, j'ai essayé ton code et il pourrait marcher mais il y a un dernier petit problème :
Voilà le résultat en ajoutant ton code :
Résultat

EDIT : J'ai rajouté un simple padding-bottom de 40px et maintenant, cela s'adapte bien "dynamiquement" avec le texte :
Résultat obtenu !

Je vous remercie tous les deux !
La réponse sera accordée @AlexJM mais @F3LENYR m'a aussi aidé ! Merci à vous deux !