Disposition de la grille CSS : alignez la ligne de base des éléments qui s'étendent sur plusieurs lignes sur la ligne inférieure des autres colonnes.
P粉032649413
2023-08-02 15:26:53
<p>Je souhaite aligner les lignes de base de a et c. </p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">#grid{
affichage:grille;
grille-modèle-colonnes : 1fr 1fr ;
align-items : ligne de base ;
}
#un{
ligne de grille : 1 / travée 2 ;
colonne de grille : 1 ;
remplissage : 8 px ;
fond : rouge ;
}
#b{
ligne de grille : 1 ;
colonne de grille : 2 ;
fond : jaune ;
}
#c{
ligne de grille : 2 ;
colonne de grille : 2 ;
fond : bleu ;
}</pré>
<pre class="brush:html;toolbar:false;"><div id="grid">
<div id="a">aaaaa</div>
<div id="b">bbbbb</div>
<div id="c">ccccc</div>
</div></pre>
<p><br /></p>
<p>J'ai essayé de définir la grille extérieure sur une seule ligne et d'envelopper b et c dans un div avec l'attribut inline-whatever, mais a s'aligne toujours avec b au lieu de c. </p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">#grid{
affichage:grille;
grille-modèle-colonnes : 1fr 1fr ;
align-items : ligne de base ;
}
#un{
ligne de grille : 1 ;
colonne de grille : 1 ;
remplissage : 8 px ;
fond : rouge ;
}
#d{
affichage : bloc en ligne ;
ligne de grille : 1 ;
colonne de grille : 2 ;
}
#b{
fond : jaune ;
}
#c{
fond : bleu
}</pré>
<pre class="brush:html;toolbar:false;"><div id="grid">
<div id="a">aaaaa</div>
<div id="d">
<div id="b">bbbbb</div>
<div id="c">ccccc</div>
</div>
</div></pre>
<p><br /></p>
<p>Comment aligner a et c avec la ligne de base ? </p>
Étant donné que la dernière base de référence est relativement nouvelle (j'utilise Electron 19 qui ne le prend pas en charge), je recherche des alternatives. En référence à ce post SO sur flex, il s'avère que je dois envelopper le bloc en ligne dans un autre conteneur.
Je crois que vous souhaitez déclarer align-items : dernière ligne de base.
"Puis-je utiliser align-items : dernière ligne de base ?" affiche un taux de support global de 85 %.
Pour la terminologie des spécifications, voir Flex Container Baseline.