Veuillez exécuter l'exemple de layout de grille simple suivant, avec une cellule de grille qui est un p> SELECT> CODE>:
<div class="grid-container grid-column-count-2 grid-row-count-2">
<div class="col-1 row-1 rowspan-2 align-self-stretch" style="background-color: #f2f2f2; border: 1px solid #bbb; overflow-y: scroll;"></div>
<input type="text" class="col-2 row-1" />
<input type="text" class="col-2 row-2 align-self-end" />
<input type="text" class="col-2 row-1" />
</div>
3 Réponses :
En réalité, l'élément Le problème est dans l'image ci-dessous , dans la deuxième colonne, remarquez comment les entrées ne prennent pas la hauteur complète de la ligne. C'est le Vous n'avez pas vu la même chose comportement avec votre exemple div parce que cette version n'avait aucun contenu. Voici, avec 4 lignes de contenu, comme votre premier exemple: p> p> sélectionnez code> avec plusieurs options code> ne perturbe pas les lignes de grille. align-items: Démarrer code> sur le conteneur de grille, et align-auto: fin code> sur l'entrée d'entrée code> code>, qui emballe les entrées dans la ligne. p> Align - * code> Propriétés effectuant leur travail. P> 
P>
<div class="grid-container grid-column-count-2 grid-row-count-2">
<div class="col-1 row-1 rowspan-2 align-self-stretch" style="background-color: #f2f2f2; border: 1px solid #bbb; overflow-y: scroll;"><span>div A</span><br>
<span>div B</span><br><span>div C</span><br><span>div D</span><br></div>
<input type="text" class="col-2 row-1" />
<input type="text" class="col-2 row-2 align-self-end" />
<input type="text" class="col-2 row-1" />
</div>
Si vous supprimez align-items: démarrage; à partir de .grid-conteneur et align-t-à-fin dans la liste des classes CSS sur la seconde Entrée , les éléments d'entrée se développent soudainement verticalement, ce qui résout un problème au coût de la création d'une autre. Si votre hypothèse était correcte et que la sélection n'influenait pas les hauteurs de la rangée, tout alignement vertical des autres cellules ne ferait aucune différence!
Votre question est descendue à ceci: "Comment puis-je empêcher l'élément Select d'influencer la hauteur de la ligne dans la grille?" J'ai souligné que le problème que vous décrivez n'était pas dans les hauteurs de la rangée. C'est la hauteur des éléments de la grille qui ont laissé l'apparence d'un écart vertical.
Oui, et comme indiqué, en supposant que l'élément SELECT n'affecterait pas les hauteurs de la ligne, les deux rangées seraient aussi élevées que les éléments d'entrée, quel que soit leur align-auto . En d'autres termes, j'ai besoin des entrées pour définir la hauteur de la ligne (et ne pas changer de hauteur via la grille).
Pas sûr de ce que vous voulez dire. Les propriétés align-* rétrécissent les entrées dans leurs rangées. Les hauteurs de la rangée sont pleines de taille, seulement qu'il ne dispose que de grille-gap les séparant.
Fondamentalement, j'ai besoin de la hauteur d'entrée non affectée par la grille non plus. La hauteur des éléments d'entrée ne doit pas être modifiée par la hauteur de la ligne de la cellule qu'ils sont. L'écart vertical entre les entrées doit à 10px, à la fois dans le CSS et également visuellement.
La hauteur de la grille est définie par le plus haut article. Dans ce cas, c'est l'élément SELECT. Cet élément continue ensuite à définir la hauteur des rangées de la grille. Les hauteurs de la rangée restent alors constantes sur la grille. Les entrées n'ont aucun impact sur la hauteur de la rangée (à moins qu'ils ne cultivent finalement plus grand que l'élément Select).
C'était exactement mon problème - la hauteur totale de la grille a été modifiée par le choix (étant le plus grand). J'avais besoin d'un moyen de choisir d'avoir une) une hauteur minimale fixe, et b) de côté de cette hauteur minimale, toujours prenez sa hauteur de la cellule qu'elle est dans (et ne prolonge jamais une cellule au-delà cette hauteur minimale).
envisagez d'ajouter Taille CODE> Attribut à
Étonnamment, cela fonctionne, même si la taille de la taille de 1 ou 2. Un bon endroit!
Expérimentation, j'ai trouvé un moyen de résoudre le problème: semble résoudre le problème. Ce qui semble très intuitif à propos de ceci est que p > min-hauteur code> dans ce cas dépasse la hauteur (écrase) la hauteur, efficacement
<div class="grid-container grid-column-count-2 grid-row-count-2">
<select multiple class="col-1 row-1 rowspan-2 align-self-stretch">
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
<option>E</option>
</select>
<input type="text" class="col-2 row-1" />
<input type="text" class="col-2 row-2 align-self-end" />
<input type="text" class="col-2 row-1" />
</div>
Je comprends ta solution. Cela rend votre mise en page votre travail comment vous voulez. Mais je ne comprends pas pourquoi vous avez besoin de align-items et align-auto ici? Ils ne font aucune différence, car vous avez éliminé tout espace libre. Pourquoi les avoir?
@Michael_B Parce que dans mon problème mondial réel, les éléments sont beaucoup plus complexes et impliquent des éléments personnalisés qui créent des étiquettes qui peuvent être alignées vers le nord, l'est, l'ouest et le sud. Imaginez un type d'entrée = texte avec une étiquette alignée nord à côté et de type d'entrée = case à cocher avec une étiquette alignée est. C'est pourquoi j'ai besoin de pouvoir contrôler l'alignement de la ligne verticale. (La case à cocher devrait résider au bas de sa cellule s'il est dans la même ligne que le type d'entrée décrit = texte avec l'étiquette alignée nord).
C'est la solution logique que je considérerais (je suis un peu en retard cette fois). J'ai utilisé ce truc avant: Stackoverflow.com/a/58488563/8620333 et il fonctionne aussi avec la largeur aussi: