css - min hauteur de par le nombre de lignes
Je pense que je connais déjà la réponse à cette question, mais j'espère peut-être que quelqu'un aura une certaine astuce pour que .
Je veux spécifier un min-hauteur d'un DIV , mais pas px /% base . (Je sais que cela semble étrange , mais c'est pour des raisons de compatibilité /réactivité)
Fondamentalement, je veux être en mesure de spécifier le nombre de lignes .
J'ai une grille de DIVS , mais les éléments à l'intérieur ne sont pas fixes, de sorte qu'un élément peut avoir 3 lignes, et ensuite seulement 2 ou 1 ligne . cela crée la mise en page .
Fondamentalement , ce que je besoin est: est-CE
===================== ===================== =====================
Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit
amet, consectetur amet, consectetur amet, consectetur
adipiscing elit.
===================== ===================== =====================
===================== ===================== =====================
Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit
amet, consectetur amet, consectetur
adipiscing elit.
===================== ===================== =====================
et non PAS de ce :
===================== ===================== =====================
Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit
amet, consectetur amet, consectetur amet, consectetur
adipiscing elit. ===================== =====================
=====================
===================== =====================
===================== Lorem ipsum dolor sit Lorem ipsum dolor sit
Lorem ipsum dolor sit amet, consectetur =====================
amet, consectetur =====================
adipiscing elit.
=====================
peut faire ce genre de chose peut être atteint par le "je veux 3 lignes" ?
(Par opposition à des pixels, en pourcentage /em ??)
Modifier Je
Après les commentaires -
Ce que je veux vraiment, c'est quelque chose comme les éléments de FORMULAIRE , INPUT ou TEXTAREA où vous pouvez simplement spécifier la hauteur et la largeur par des lignes /caractères !
<TEXTAREA NAME=string, ROWS=n, COLS=n> </TEXTAREA>
Il est difficile o crois que personne n'a inventé une solution et nous a tous laissés à la lutte avec le PX /em /% calculs et les goûts ..
Vous devez vous connecter pour publier un commentaire.
Vous devez utiliser un clearfix hack
Il va vous permettre d'obtenir votre divs aligné sans spécifier n'importe quelle hauteur. C'est comme un séparateur de ligne :
Vous pouvez définir la hauteur /marge sur chaque div, bien sûr :
EDIT :
Interne de taille égale, sans l'aide de tableaux, vous avez plusieurs solutions :
À l'aide de
overflow:hidden
sur le parent et un extramargin-bottom
sur les enfants si vous utilisez seulement l'arrière-plan.À l'aide de
affichage-table
l'attribut (Méthode 1)Ou à l'aide de javascript (Méthode 3)
line-height
(ou non-standard de l'attribut) dans votre premier div, et de calculer votreheight
avec elle.Pourquoi êtes-vous opposé à l'idée de la création d'
min-height
en ems? Si vous avezline-height
mis en ems, la multiplier par trois et vous en avez pour votre hauteur désirée!Trafiqué
Mise à jour: réglage min-hauteur de trois lignes est un exercice futile - il ne tient pas compte pour les scénarios où le contenu ne pas dans l'espace disponible. Vous pouvez utiliser faux colonnes au lieu de faire du contenu, semblent être de hauteur uniforme à l'intérieur de la ligne
min-height
œuvres.Je l'ai accompli en utilisant
flexbox
etmin-height
.Ont chacun de vos
div
éléments à l'intérieur d'unflexbox
conteneur pour les amener à avoir la même hauteur et de réagir rapidement (c'est à dire utiliser les points d'arrêt, flexboxwrap
, etmin-width
à ce que la probabilité d'avoir plus de 3 lignes de texte est faible). Ensuite, pour chacun de vos éléments internes, définir lamin-height
etline-height
des valeurs comme @o.v. suggéré.min-height
doit être égale àfont-size
*line-height
multiplicateur.J'avais besoin de l'interne paragraphes pour être au moins 2 lignes de haut (il y a une forte probabilité qu'ils contiennent 1 ou 2 lignes de texte, avec une très faible probabilité qu'ils contiennent plus de 2 lignes de texte), donc c'est ce que j'ai:
HTML
CSS
Je ne sais pas pourquoi voudriez-vous que..mais vous pourriez fixer la hauteur et la largeur de la div de classe en fonction de la taille de la police que vous allez utiliser.
dire votre taille de la police est de 10px et tu vas en utiliser 10 px padding puis utiliser des divs avec 50hauteur px.. puis ajouter un margin-bottom à ces divs et vous êtes bon pour aller je pense!