Derniers messages sur Zeste de Savoirhttps://zestedesavoir.com/forums/2020-05-26T21:46:20+02:00Les derniers messages parus sur le forum de Zeste de Savoir.Mettre des divs en colonne à la même hauteur, message #2213172020-05-26T21:46:20+02:00FeaturettesAffect/@FeaturettesAffecthttps://zestedesavoir.com/forums/sujet/14118/mettre-des-divs-en-colonne-a-la-meme-hauteur/?page=1#p221317<p>Merci pour votre aide à tous, j’ai réussi à pas mal avancer mais pas encore tout à fait ce que je veux. </p>
<p>Pour l’instant, j’ai ceci :</p>
<figure><img src="https://i.imgur.com/ufGS4WX.png" alt="Etat actuel"><figcaption>Etat actuel</figcaption></figure>
<p>Comme vous le voyez, mes cartes sont étirées sur toute la longueur de la ligne. Y a-t-il un moyen d’éviter ça ? Globalement, j’aimerais limiter la taille de mes cartes à 15%.</p>
<p>Merci encore pour votre aide <img src="/static/smileys/svg/smile.svg" alt=":)" class="smiley"></p>
<p>Voici ma CSS actuelle :</p>
<div class="hljs-code-div"><div class="hljs-line-numbers"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div><pre><code class="hljs language-css"><span class="hljs-selector-class">.parent</span> {
<span class="hljs-attribute">display</span>: flex;
<span class="hljs-attribute">flex-wrap</span>: wrap;
}
<span class="hljs-selector-class">.child</span> {
<span class="hljs-attribute">display</span>: flex;
<span class="hljs-attribute">flex</span>: <span class="hljs-number">1</span> <span class="hljs-number">0</span> <span class="hljs-number">15%</span>;
<span class="hljs-attribute">margin-right</span>: <span class="hljs-number">0.75rem</span>;
<span class="hljs-attribute">margin-left</span>: <span class="hljs-number">0.75rem</span>;
<span class="hljs-attribute">padding</span>: <span class="hljs-number">24px</span>;
<span class="hljs-attribute">align-items</span>: flex-start;
<span class="hljs-attribute">cursor</span>: pointer;
}
<span class="hljs-selector-class">.baby</span> {
<span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;
}
</code></pre></div>Mettre des divs en colonne à la même hauteur, message #2212262020-05-24T20:01:12+02:00anonyme/@anonymehttps://zestedesavoir.com/forums/sujet/14118/mettre-des-divs-en-colonne-a-la-meme-hauteur/?page=1#p221226<p>Tu as ce pense bête qui aide bien pour les flex en CSS : <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">https://css-tricks.com/snippets/css/a-guide-to-flexbox/</a></p>Mettre des divs en colonne à la même hauteur, message #2212252020-05-24T19:54:30+02:00anonyme/@anonymehttps://zestedesavoir.com/forums/sujet/14118/mettre-des-divs-en-colonne-a-la-meme-hauteur/?page=1#p221225<p>Tu peux le surcharger ainsi :</p>
<div class="hljs-code-div"><div class="hljs-line-numbers"><span></span><span></span><span></span><span></span></div><pre><code class="hljs language-css"><span class="hljs-selector-class">.row</span> {
<span class="hljs-attribute">display</span>: flex;
<span class="hljs-attribute">align-items</span>: stretch;
}
</code></pre></div>Mettre des divs en colonne à la même hauteur, message #2212232020-05-24T19:50:37+02:00viki53/@viki53https://zestedesavoir.com/forums/sujet/14118/mettre-des-divs-en-colonne-a-la-meme-hauteur/?page=1#p221223<p>Hello,</p>
<p>Malheureusement faire ça avec du positionnement classique est très compliqué, pour ne pas dire impossible (en tout cas proprement).</p>
<p>Heureusement… il existe flexbox qui permet de répondre à ce besoin !</p>
<p>En utilisant flexbox pour tes colonnes et les blocs dedans tu pourras gérer le remplissage des parents si besoin. <img src="/static/smileys/svg/clin.svg" alt=";)" class="smiley"> </p>Mettre des divs en colonne à la même hauteur, message #2212192020-05-24T18:14:21+02:00FeaturettesAffect/@FeaturettesAffecthttps://zestedesavoir.com/forums/sujet/14118/mettre-des-divs-en-colonne-a-la-meme-hauteur/?page=1#p221219<p>Bonjour à tous !</p>
<p>Je viens chercher un peu d’aide car pour un side project que je suis en train de développer (et que je présenterai bientôt), je suis face à bug CSS que mes maigres connaissances n’arrivent pas à résoudre.</p>
<figure><img src="https://i.imgur.com/scfkzwj.png" alt="Le problème"><figcaption>Le problème</figcaption></figure>
<p>Comme vous pouvez le voir sur la capture, j’ai un ensemble de <code>div</code> dans une colonne. Le problème, c’est que certains textes à l’intérieur sont plus longs que les autres et les cartes sont donc, par conséquent, plus hautes.</p>
<p>J’aimerais que toutes les div d’une colonne (une colonne peut être, comme ici, sur deux lignes, elle correspond en fait à une date) aient la même hauteur.</p>
<p>J’ai essayé plusieurs méthodes en CSS, mais rien qui ne marchait chez moi, probablement car je copie/colle sans trop comprendre.</p>
<p>Voici les CSS qui peuvent peut-être être utiles :</p>
<p>La CSS du container d’une tâche (donc d’un bloc de couleur dans la capture ci-dessus) :</p>
<div class="hljs-code-div"><div class="hljs-line-numbers"><span></span><span></span><span></span><span></span></div><pre><code class="hljs language-css"><span class="hljs-selector-class">.task-container</span> {
<span class="hljs-attribute">display</span>: inline-block;
<span class="hljs-attribute">float</span>: none;
}
</code></pre></div>
<p>Quant à la ligne :</p>
<div class="hljs-code-div"><div class="hljs-line-numbers"><span></span><span></span><span></span><span></span><span></span></div><pre><code class="hljs language-css"><span class="hljs-selector-class">.row</span> {
<span class="hljs-attribute">margin-left</span>: auto;
<span class="hljs-attribute">margin-right</span>: auto;
<span class="hljs-attribute">margin-bottom</span>: <span class="hljs-number">20px</span>;
}
</code></pre></div>
<p>Pour info, c’est le framework <a href="materializecss.com/">Materialize CSS</a> que j’utilise.</p>
<p>Merci d’avance de votre aide, et n’hésitez pas si vous avez besoin de plus d’infos, voire un accès à l’environnement de dev pour voir par vous-mêmes <img src="/static/smileys/svg/smile.svg" alt=":)" class="smiley"></p>