web-dev-qa-db-fra.com

css - hauteur minimale en nombre de lignes

Je pense que je connais déjà la réponse à cette question, mais j'espère que quelqu'un aura peut-être une astuce intéressante pour cela.

Je veux spécifier une hauteur minimale d'un DIV, mais pas sur la base px /%. (Je sais que cela semble étrange, mais c'est pour des raisons de compatibilité/réactivité)

En gros, je veux pouvoir le spécifier en nombre de lignes.

J'ai une grille de DIVS, mais les éléments à l'intérieur ne sont pas fixes, donc un élément peut avoir 3 lignes et le suivant seulement 2 ou 1 ligne. cela gâche la mise en page.

Fondamentalement, ce dont j'ai besoin, c'est ceci:

    =====================      =====================      =====================
    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 PAS ceci: 

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

ce genre de chose peut-il être réalisé en spécifiant "Je veux 3 lignes"? (Par opposition aux pixels, pourcentage/em ??)

Edit I  

Après les commentaires -

Ce que je veux vraiment, c'est quelque chose comme les éléments FORM, 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 de croire que personne n’a inventé une telle solution et nous a tous laissés aux prises avec des calculs PX/em /% et autres.

htmlheightcss
23
Obmerk Kronen

Vous devriez utiliser un clearfix hack

Cela vous permettra d’aligner vos divs sans spécifier de 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 toujours définir hauteur/marge sur chaque div, bien sûr:

MODIFIER :

Pour une taille égale interne sans utiliser de tables, vous avez plusieurs solutions:

Utiliser overflow:hidden sur le parent et un margin-bottom supplémentaire sur les enfants si vous n'utilisez que l'arrière-plan.

Utilisation de l'attribut display-table (méthode 1)

Ou en utilisant javascript (Méthode 3)

7
zessx

Pourquoi es-tu si opposé à l’idée de mettre min-height dans ems? Si vous avez défini line-height dans ems, multipliez-le par trois et vous obtenez la hauteur souhaitée!

div {
    line-height:1.5em;
    min-height:4.5em;
    float:left;
    width:33%;/*close enough*/
}

Fiddled

Mise à jour: définir un minimum de hauteur sur trois lignes est un exercice futile. Il ne tient pas compte des scénarios dans lesquels le contenu ne correspond pas ne tient pas dans l'espace disponible. Vous pouvez utiliser de fausses colonnes à la place pour que le contenu semble avoir une hauteur uniforme dans la rangée.

17
o.v.

J'ai accompli cela en utilisant flexbox et min-height.

Demandez à chacun de vos éléments div dans un conteneur flexbox de leur donner la même hauteur et de réagir en conséquence (par exemple, utilisez des points d'arrêt, flexbox wrap et min-width pour vous assurer que la probabilité d'avoir plus de 3 lignes de texte est faible). Ensuite, pour chacun de vos éléments internes, définissez les valeurs min-height et line-height telles que @ o.v. suggéré. min-height devrait être égal à font-size * line-height multiplicateur.

J'avais besoin que les paragraphes internes aient 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), c'est donc ce que J'ai fini avec:

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)
}
2
dignoe

Je ne sais pas pourquoi voudriez-vous cela ... mais vous pouvez fixer la hauteur et la largeur de la classe div en fonction de la taille de la police que vous allez utiliser. Disons que votre taille de police est de 10 pixels et que vous allez utiliser 10 px padding puis utilisez les divs avec une hauteur de 50px .. puis ajoutez un margin-bottom à ces divs et vous êtes prêt à partir je pense!

0
Praveen Puglia