C'est ma première question ici, soyez doux, je viens de commencer à apprendre ces choses :)
Je travaille sur la construction d'une page de pratique utilisant uniquement HTML, Sass et Bootstrap-Grid.CSS (donc essentiellement en utilisant uniquement des lignes et les colonnes, les classes de cartes ne sont pas incluses dans le fichier, je les ai coiffées séparément) et j'ai rencontré un problème probablement très simple qui me garde éveillé la nuit. P>
J'ai besoin de faire tous les divs de texte. les arrière-plans blancs) le même witdh "visuellement" comme l'img au-dessus d'eux, mais il suffit de redimensionner le texte de la carte et de les rendre absolument positionnés ne semble pas comme la solution appropriée en raison de la création d'un autre problème, et je veux garder le .col- à cause des résultats de RWD faciles. Le texte .Card-Text and .Card-img DIV hériter de la largeur donnée des .Col-, les images doivent conserver la bonne proportion et à cause du fond gris de .Card-img est identique à la section de l'ensemble de la section. problème réside uniquement dans le texte .Card (au moins visuellement). p>
La structure de colonne dans un .row ressemble à ceci: p> et ainsi de suite (Six colonnes) et le SCCS pour cette section ressemble à ceci: p> captures d'écran avec inspection des divs: p> .Card P> .Card-Texte p> EDIT: P> Les styles SCSS qui ont finalement fonctionné: P> .portfolio {
background-color: $color-background;
.card {
background-color: $color-background;
margin: 0 44px 50px 44px;
.card-img {
overflow: hidden;
img {
vertical-align: bottom;
width: 100%;
}
}
.card-text {
background-color: $color-body;
padding-top: 29px;
padding-bottom: 27px;
h5 {
margin: 2px 0 0 0;
font-weight: lighter;
font-family: $font-decor;
color: #737373;
font-size: 14px;
}
h6 {
font-family: $font-text;
font-weight: bold;
font-size: 18px;
margin: 0;
color: #333333;
}
}
}
.col {
padding-top: 45px;
}
}
3 Réponses :
espoir que cela fonctionne :) p>
Meilleur moyen de répondre à la question est de réécrire le code et corrigé-le. S'il vous plaît éditer la réponse et attendez vos réponses.
Merci Austin, j'ai résolu le problème avec tous les idées des gars qui me poussaient à la bonne direction :)
Ajoutez une certaine largeur à J'ai modifié votre code et l'a ajouté à l'extrait. p> aperçu une fois. p> p> Carte-img code> puis déplacez
.Card-Text Div code> Intérieur
Carte-img Code> et modifier les styles CSS pour Carte-img code>.
<div class="col-md-4">
<div class="card">
<div class="card-img">
<img src="https://p1.pxfuel.com/preview/844/972/952/suit-model-businessman-corporate-royalty-free-thumbnail.jpg" alt="image">
<div class="card-text">
<h6>Ebony & Ivory</h6>
<h5>Branding</h5>
</div>
</div>
</div>
</div>
Merci Suraj, j'ai résolu le problème avec tous les idées des gars qui me poussaient à la bonne direction :)
Il suffit d'ajouter le même Vérifiez et exécutez ce qui suit Code Snippet Strong> Pour un exemple pratique de l'approche ci-dessus: p> p> marge: 0 44px code> que vous avez ajouté pour le
.Card-img code> à votre
.Card-texte code> élément et Ensuite, ajoutez
largeur: 100% code> aux éléments de sorte qu'ils occupent la largeur complète de leur parent div et que vous devriez obtenir la largeur égale pour les deux éléments que vous le souhaitez.
<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" /><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<section class="portfolio">
<div class="col-md-4">
<div class="card">
<div class="card-img">
<img src="https://picsum.photos/240/360" alt="image">
</div>
<div class="card-text">
<h6>Ebony & Ivory</h6>
<h5>Branding</h5>
</div>
</div>
</div>
</section>
Merci Andrew, j'ai résolu le problème avec tous les idées gars qui me poussaient à la bonne direction :)
La perfectionnement ne fonctionne pas pour moi depuis que j'ai moins de 15 représentants;)