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
P粉032649413 2023-08-02 15:26:53
0
2
415
<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>
P粉032649413
P粉032649413

répondre à tous(2)
P粉645569197

É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.


#grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  align-items: baseline;
}
#a{
  grid-row: 1;
  grid-column: 1;
  padding:8px;
  background:red;
}
#d{
  grid-row: 1;
  grid-column: 2;
}
#b{
  background:yellow;
}
#c{
  background:blue
}
.inline-block{
  display:inline-block;
}
<div id="grid">
  <div id="a">aaaaa</div>
  <div id="d">
    <div class="inline-block">
      <div id="b">bbbbb</div>
      <div id="c">ccccc</div>
    <div>
  </div>
</div>


P粉555696738

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.


#grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: last baseline;
}

#a {
  grid-row: span 2;
  padding: 8px;
  background: red;
}
#b {
  background: yellow;
}

#c {
  background: blue;
}
<div id="grid">
  <div id="a">aaaaa</div>
  <div id="b">bbbbb</div>
  <div id="c">ccccc</div>
</div>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal