css – Mindesthöhe nach Anzahl der Zeilen

Lesezeit: 6 Minuten

Benutzer-Avatar
Hinweis Kronen

Ich glaube, ich kenne die Antwort darauf bereits, aber ich hoffe, dass vielleicht jemand einen netten Trick dafür hat.

Ich möchte eine Mindesthöhe eines DIV angeben, aber nicht px / % based . (Ich weiß, es klingt seltsam, aber es ist aus Kompatibilitätsgründen / Reaktionsfähigkeit)

Grundsätzlich möchte ich in der Lage sein, es durch die Anzahl der Zeilen zu spezifizieren.

Ich habe ein Raster von DIVS , aber die Elemente darin sind nicht festgelegt, sodass ein Element 3 Zeilen haben kann und das nächste nur 2 oder 1 Zeile . das bringt das Layout durcheinander.

Im Grunde brauche ich DAS:

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

und NICHT das:

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

kann so etwas durch die Angabe “Ich möchte 3 Zeilen” erreicht werden? (Im Gegensatz zu Pixel, Prozent / em ??)

Bearbeiten I

Nach Kommentaren –

Was ich wirklich will, sind so etwas wie die FORM-Elemente, INPUT oder TEXTAREA, wo man die Höhe und Breite einfach per Zeilen/Zeichen angeben kann!

<TEXTAREA NAME=string, ROWS=n, COLS=n> </TEXTAREA>

Es ist kaum zu glauben, dass niemand eine solche Lösung erfunden hat und uns alle mit PX / em / %-Berechnungen und dergleichen kämpfen lässt.

Benutzer-Avatar
Oleg

Warum sind Sie so gegen die Idee des Setzens? min-height im Ems? Wenn Sie haben line-height set in ems, multipliziere das mit drei und du hast deine gewünschte höhe!

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

Gefummelt

Update: Das Festlegen von min-height auf drei Zeilen ist eine Übung in Sinnlosigkeit – es berücksichtigt keine Szenarien, in denen content nicht in den zur Verfügung stehenden Raum passen. Du könntest benutzen Scheinsäulen Stattdessen soll der Inhalt innerhalb der Zeile von einheitlicher Höhe erscheinen

  • Danke für deine Antwort – sie verdeutlicht das Problem genau. kümmern Sie sich um die Größe des Ausgabebereichs in der Geige zu ändern? 🙂

    – Obmerk Kronen

    22. Juni 2012 um 8:06 Uhr

  • Ich ging von einem Layout mit fester Breite aus. Wie auch immer, was beabsichtigen Sie zu tun, wenn der Inhalt nicht in drei Zeilen passen? Wenn es Ihnen egal ist (und Sie das Verhalten für dieses Szenario nicht angegeben haben), machen Sie einfach min-height zu height und setzen Sie overflow auf hidden. In der Zwischenzeit werde ich meine Antwort aktualisieren, um falsche Spalten zu verwenden

    – Oleg

    22. Juni 2012 um 8:14 Uhr

  • @ObmerkKronen: Nur um meinen obigen Kommentar zu verdeutlichen, sagen Sie in der Frage Ein Element kann 3 Zeilen haben und das nächste nur 2 oder 1 Zeile was bedeutet, dass Sie die Containerbreite kontrollieren und garantieren können, dass der Inhalt niemals 3 Zeilen überschreitet. Wenn Sie die jsfiddle-Vorschau schmäler skalieren, erfüllen Sie diese Garantie nicht mehr

    – Oleg

    22. Juni 2012 um 8:20 Uhr

  • Jawohl . Ich kann eine maximale Zeilenzahl garantieren. aber nicht die mind. Das ist das Problem. Faux-Spalten funktionieren in meinem vollständigen Szenario nicht (lesen Sie die anderen Kommentare)

    – Obmerk Kronen

    22. Juni 2012 um 8:30 Uhr

  • @ObmerkKronen: großartig, das macht die Geige, die ich bereitgestellt habe, zu einer funktionierenden Lösung. Es kümmert sich wegen der Art und Weise nicht um die minimale Inhaltsgröße min-height funktioniert.

    – Oleg

    22. Juni 2012 um 8:32 Uhr

Benutzer-Avatar
dignoe

Ich habe dies erreicht, indem ich verwendet habe flexbox und min-height.

Haben Sie jeden von Ihnen div Elemente innerhalb von a flexbox Container, damit sie die gleiche Höhe haben und reaktionsschnell reagieren (dh Haltepunkte verwenden, flexbox wrapund min-width um sicherzustellen, dass die Wahrscheinlichkeit, mehr als 3 Textzeilen zu haben, gering ist). Legen Sie dann für jedes Ihrer internen Elemente die min-height und line-height Werte wie @ov vorgeschlagen. min-height sollte gleich sein font-size * line-height Multiplikator.

Ich brauchte die internen Absätze, die mindestens 2 Zeilen hoch sein sollten (es besteht eine hohe Wahrscheinlichkeit, dass sie 1 oder 2 Textzeilen enthalten, mit einer sehr geringen Wahrscheinlichkeit, dass sie mehr als 2 Textzeilen enthalten würden), also das ist was Ich endete mit:

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

  • (Anzahl der Zeilen) * (Schriftgröße) * (Multiplikator für die Zeilenhöhe) + (Padding-Top) + (Padding-Bottom)

    – Kilowatt

    7. April 2019 um 12:33 Uhr

Benutzer-Avatar
zessx

Sie sollten eine verwenden Clearfix-Hack

Es ermöglicht Ihnen, Ihre Divs auszurichten, ohne eine Höhe anzugeben. Es ist wie ein Zeilentrenner:

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

Sie können natürlich immer noch Höhe / Rand für jedes div festlegen:

BEARBEITEN :

Für eine interne gleiche Größe ohne Verwendung von Tabellen haben Sie mehrere Lösungen:

Verwenden overflow:hidden auf die Eltern und ein Extra margin-bottom auf Kinder, wenn Sie nur den Hintergrund verwenden.

Verwenden display-table Attribut (Methode 1)

Oder mit Javascript (Methode 3)

  • Ja, die Divs werden nach dem Abstand zwischen ihnen ausgerichtet, aber nicht nach ihrer EIGENEN Größe.

    – Obmerk Kronen

    22. Juni 2012 um 7:27 Uhr

  • Aber es gibt kein einziges Problem, ihre eigene Größe festzulegen, das ist nur eine CSS-Regel. Ihr Problem war die Behältergröße, oder?

    – zessx

    22. Juni 2012 um 7:29 Uhr

  • Au ok, hab ich verpasst. Dann ist eine Tabelle eine gute Option, deren Breite automatisch angepasst wird. Siehe mein EDIT für eine andere Lösung.

    – zessx

    22. Juni 2012 um 7:33 Uhr


  • +1 für die Bemühungen 🙂 aber diese Lösungen funktionieren bei mir nicht. Ich kann hier nicht mein gesamtes Markup detailliert beschreiben, aber das Problem liegt tatsächlich in einem anderen div , das nach einem anderen verschachtelt ist, und dieser ganze Block wird auf dem Raster verteilt. Spalte und Waisen/Witwen in css3 . Danke noch einmal..

    – Obmerk Kronen

    22. Juni 2012 um 7:53 Uhr

  • Dann kann JS Ihre Option sein: prüfen Sie nach line-height (oder ein Nicht-Standard-Attribut) in Ihrem ersten div und berechnen Sie Ihren height damit.

    – zessx

    22. Juni 2012 um 7:57 Uhr


Ich weiß nicht, warum Sie das wollen … aber Sie könnten die Höhe und Breite der div-Klasse entsprechend der Größe der Schriftart, die Sie verwenden werden, festlegen. Angenommen, Ihre Schriftgröße beträgt 10 Pixel, und Sie verwenden eine Polsterung von 10 Pixel. Verwenden Sie dann Divs mit einer Höhe von 50 Pixel. Fügen Sie dann a hinzu Rand unten zu diesen divs und du bist startklar, denke ich!

1229010cookie-checkcss – Mindesthöhe nach Anzahl der Zeilen

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy