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

InformationsquelleAutor Obmerk Kronen | 2012-06-22

7

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 :
```
=====================      =====================      =====================
Lorem ipsum dolor sit      Lorem ipsum dolor sit      Lorem ipsum dolor sit 
amet, consectetur          amet, consectetur          amet, consectetur
adipiscing elit.           =====================      =====================
=====================      
{clearfix}
=====================      =====================      =====================
Lorem ipsum dolor sit      Lorem ipsum dolor sit      Lorem ipsum dolor sit 
amet, consectetur          amet, consectetur          =====================
=====================      adipiscing elit.
                           =====================
```
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 extra margin-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)
- oui, les divs seront alignés comme pour l'espace entre eux, mais non pas de leur PROPRE taille ..
- Mais il n'y a pas un seul problème à régler leur propre taille, c'est juste une règle CSS. Votre problème a été pour la taille du conteneur, à droite ?
- non, le problème était pour leur taille.
- Ux ok, je l'ai raté. Ensuite, j'ai une table est une bonne option, leur largeur est ajustée automatiquement. Voir mon montage pour une autre solution.
- +1 pour l'effort : -), mais ces solutions ne fonctionne pas pour moi . Je ne peux pas le détail de tout mon balisage ici , mais le problème est en fait à l'intérieur d'une autre div , qui est imbriqué après l'autre , et l'ensemble de ce bloc est de propagation sur la grille.. et en fait, aujourd'hui, il serait plus facile à faire avec les .la colonne et les orphelins et les veuves dans css3 . merci encore..
- Puis JS peut être votre option : vérifier line-height (ou non-standard de l'attribut) dans votre premier div, et de calculer votre height avec elle.
- yep - pensé . en fait, je suis de la vérification de la maçonnerie maintenant . mais encore, je pense qu'il devrait être un standard de la propriété css 🙂
- J'aimerais juste que vous sachiez que votre clearfix hack lien est maintenant en baisse
InformationsquelleAutor zessx
17

Pourquoi êtes-vous opposé à l'idée de la création d' min-height en ems? Si vous avez line-height mis en ems, la multiplier par trois et vous en avez pour votre hauteur désirée!
```
div {
    line-height:1.5em;
    min-height:4.5em;
    float:left;
    width:33%;/*close enough*/
}
```
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
- Merci pour votre réponse - il illustre le problème exactement . soins pour redimensionner le volet de sortie en coulisse ?? 🙂
- J'ai été en supposant une mise en page à largeur fixe. De toute façon, que comptez-vous faire lorsque le contenu de ne pas ajustement en trois lignes? Si vous n'aimez pas (et que vous n'avez pas à spécifier le comportement de ce scénario), il suffit de faire min-hauteur en hauteur et définir overflow hidden. En attendant, je vais mettre à jour ma réponse à usage de faux colonnes
- juste pour préciser mon commentaire ci-dessus, vous dites dans la question un élément peut avoir 3 lignes, et ensuite seulement 2 ou 1 ligne ce qui implique que vous avez le contrôle de conteneur largeur et peut garantir le contenu ne pourra jamais dépasser 3 lignes. Lorsque vous redimensionnez la jsfiddle aperçu pour être plus étroite, vous n'êtes plus honorer cette garantie
- oui . Je peux vous garantir un max de lignes nombre. mais pas le min. c'est le problème. faux colonnes ne fonctionne pas dans mon scénario complet (lire les autres commentaires)
- la grande, qui met à la tripoter, j'ai fourni une solution de travail. Il ne se soucie pas de minimum de la taille du contenu en raison de la façon min-height œuvres.
- merci - mais 1 - c'est toujours le même empilement de problème. 2 - ma question était de savoir comment le faire SANS l'aide de px /% /em pour le min-height. aussi , dans mon cas et mon scénario, le php côté prend soin de la longueur maximale, et fausse les colonnes ne peuvent pas être utilisés, car ces divs sont imbriquées à l'intérieur (plus comme "pris en sandwich" entre les deux) 2 autres - qui constituent le bloc de la grille.
InformationsquelleAutor o.v.
4

Je l'ai accompli en utilisant flexbox et min-height.

Ont chacun de vos div éléments à l'intérieur d'un flexbox conteneur pour les amener à avoir la même hauteur et de réagir rapidement (c'est à dire utiliser les points d'arrêt, flexbox wrap, et min-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 la min-height et line-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
```
<div class="flex-container">
  <div>
    <p>Lorem ipsum...</p>
    <p>Lorem ipsum...</p>
  </div>
  <div>
    <p>Lorem ipsum...</p>
    <p>Lorem ipsum...</p>
  </div>
</div>
```
CSS
```
div.flex-container {
  display: flex;
}
div.flex-container p {
  font-size: 1em;
  line-height: 1.125; //Default is 1.2, but varies by browser
  min-height: 2.25em; //2 * 1em * 1.125
                      //(number of lines) * (font-size) * (line-height multiplier)
}
```
- (nombre de lignes) * (taille de police) * (hauteur de la ligne multiplicateur) + (padding-top) + (padding-bottom)
InformationsquelleAutor dignoe
0

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!
- merci, j'ai eu cette solution avant mais comme je l'ai dit, je suis en train de voir si elle peut être faite SANS spécifier et px tailles ...aussi, par l'ajout d'une marge-bas, il sera ajouté aussi à la pleine plongées, non seulement la moitié vides ..
- Je ne pense pas que si il est possible d'ajouter de la hauteur et la largeur de la divs comme ça. comme nous le faisons avec les textarea. J'espère que certains hack est là. Besoin de savoir.
- Exactement ma question ici : trouver un hack pour spécifier une hauteur de ligne, comme avec la zone d'entrée de la ! (et peut-être que quelqu'un devrait suggérer à l'css3 équipe de développement 🙂 )
InformationsquelleAutor Praveen Puglia

Vous devez vous connecter pour publier un commentaire.