Wie kann ich ein Div nicht größer als seinen Inhalt machen?

2070

Ich habe ein ähnliches Layout wie:

<div>
    <table>
    </table>
</div>

Ich möchte, dass sich das divnur so weit ausdehnt, wie es tablewird.

Peter Mortensen
quelle
90
Der Effekt wird als "Schrumpfen" bezeichnet, und wie beantwortet gibt es verschiedene Möglichkeiten, dies zu tun (Float, Inline, Min / Max-Breite), die alle Nebenwirkungen zur Auswahl haben
Annakata

Antworten:

2426

Die Lösung ist Ihr gesetzt divzu display: inline-block.

user473598
quelle
239
@ leif81 Sie können ein spanoder ein divoder uloder etwas anderes verwenden, der wichtige Teil ist für den Container, dessen Mindestbreite Sie haben möchten, die CSS-Eigenschaftdisplay: inline-block
miahelf
10
Wenn sich jemand fragt: Man kann das übergeordnete Element der Tabelle zentrieren, indem man "text-align: center" auf das übergeordnete Element und "text-align: left" setzt (z. B. <body style = "text-align: center"> < span style = "Textausrichtung: links; Anzeige: Inline-Block;"> <Tabelle> ... </ Tabelle> </ span> </ body>)
Bernstein
12
Es funktioniert bei mir nicht mit Chrom mit span, sondern mit Leerzeichen: nowrap;
Albanx
57
Bitte beachten Sie, dass nach dem Festlegen der display: inline-blockEigenschaft die Funktion margin: 0 auto;nicht wie erwartet funktioniert. In diesem Fall wird text-align: center;das inline-blockElement horizontal zentriert , wenn der übergeordnete Container vorhanden ist .
Savas Vedova
12
inline-blockhat bei mir NICHT funktioniert, aber inline-flexTAT.
Mareoraft
331

Sie möchten ein Blockelement mit einer von CSS als "Shrink-to-Fit" bezeichneten Breite, und die Spezifikation bietet keinen gesegneten Weg, um so etwas zu erhalten. In CSS2 ist das Verkleinern kein Ziel, sondern bedeutet, mit einer Situation umzugehen, in der der Browser eine Breite aus dem Nichts "herausholen" muss. Diese Situationen sind:

  • schweben
  • absolut positioniertes Element
  • Inline-Block-Element
  • Tabellenelement

wenn keine Breite angegeben ist. Ich habe gehört, dass sie darüber nachdenken, das, was Sie wollen, in CSS3 hinzuzufügen. Machen Sie sich vorerst mit einem der oben genannten Punkte zufrieden.

Die Entscheidung, das Feature nicht direkt verfügbar zu machen, mag seltsam erscheinen, aber es gibt einen guten Grund. Es ist teuer. Auf Anpassung verkleinern bedeutet, dass mindestens zweimal formatiert wird: Sie können erst mit der Formatierung eines Elements beginnen, wenn Sie dessen Breite kennen, und Sie können die Breite nicht berechnen, ohne den gesamten Inhalt zu durchlaufen. Außerdem muss man nicht so oft schrumpfen, wie man denkt. Warum brauchst du extra Div um deinen Tisch? Vielleicht ist Tabellenbeschriftung alles, was Sie brauchen.

Buti-Oxa
quelle
34
Ich würde sagen, inline-blockist genau dafür gedacht und löst das Problem perfekt.
Ich selbst
6
Ich denke, sie fügen in CSS4 hinzu und es wärecontent-box, max-content, min-content, available, fit-content, auto
Muhammad Umer
4
Mit dem neuen fit-contentSchlüsselwort (das zum Zeitpunkt des ersten Schreibens dieser Antwort nicht vorhanden war und noch nicht vollständig unterstützt wird ) können Sie die Größe "Auf Größe verkleinern" explizit auf ein Element anwenden, sodass keine der hier vorgeschlagenen Hacks erforderlich sind, wenn Sie dies tun Glück, nur Browser mit Unterstützung anzusprechen. +1 trotzdem; diese bleiben vorerst nützlich!
Mark Amery
floattat was ich tun musste!
Nipunasudha
228

Ich denke mit

display: inline-block;

würde funktionieren, bin mir aber nicht sicher über die Browserkompatibilität.


Eine andere Lösung wäre, Ihre divin eine andere zu wickeln div(wenn Sie das Blockverhalten beibehalten möchten):

HTML:

<div>
    <div class="yourdiv">
        content
    </div>
</div>

CSS:

.yourdiv
{
    display: inline;
}
mbillard
quelle
23
So beantworten Sie die Frage zur Browserkompatibilität: Dies funktioniert nicht mit IE7 / 8 für DIV-Elemente. Sie müssen SPAN-Elemente verwenden.
Matt Brock
@feeela - Ich setze immer ein * vor den Zoom, z *display: inline; *zoom: 1;. Ich habe nicht für diese spezielle Situation getestet, aber ich habe in der Vergangenheit immer festgestellt, dass der hasLayout-Hack nur für IE7 oder IE8 im IE7-Modus (oder IE8 in Macken!) Erforderlich ist.
Robocat
@robocat Ja, es ist in der Tat eine inline-block
Problemumgehung,
@feela - dein Kommentar macht für mich keinen Sinn! Ich schlug vor, * auch vor den Zoom zu stellen, dh * Zoom: 1;
Robocat
4
Bitte erläutern Sie, warum Ihre Inline-Block-Lösung funktioniert.
HelloWorldNoMore
220

display: inline-block Fügt Ihrem Element einen zusätzlichen Rand hinzu.

Ich würde dies empfehlen:

#element {
    display: table; /* IE8+ and all other modern browsers */
}

Bonus: Sie können diese schicke Neuheit jetzt auch ganz einfach #elementdurch Hinzufügen zentrieren margin: 0 auto.

Salman von Abbas
quelle
14
+1 - Dies ist die beste und sauberste Lösung für moderne Browser, mit der das Element auch zentriert werden kann. position: absoluteFür <IE8 ist ein bedingter Kommentar mit erforderlich.
uınbɐɥs
21
Durch die Angabe display: inline-blockwerden keine Ränder hinzugefügt. CSS verarbeitet jedoch Leerzeichen, die zwischen Inline-Elementen angezeigt werden sollen.
Feeela
Bitte erläutern Sie, warum Ihre Lösung für die Anzeige: Tabelle funktioniert.
HelloWorldNoMore
2
Inline-Block macht es unmöglich, das Element in seinem übergeordneten Element zu positionieren (z. B. wenn es eine Textausrichtung gibt: Mitte, kann es nicht dazu gebracht werden, links zu bleiben) Anzeige: Tabelle ist perfekt :)
FlorianB
1
Dies ist der position: absolute
richtige
90

Sie können versuchen fit-content(CSS3):

div {
  width: fit-content; 
  /* To adjust the height as well */ 
  height: fit-content;
}
Vitalii Fedorenko
quelle
1
@BartlomiejSkwira Gibt es einen Ersatz, der in IE oder Eclipse arbeitet? andere Lösung als Inline-Block funktioniert bei mir nicht .. \
DAVIDBALAS1
8
Das macht zu viel Sinn, natürlich fehlt es an Unterstützung.
Sava B.
86

Was für mich funktioniert ist:

display: table;

in der div. (Getestet am Firefox und Google Chrome ).

Sony Santos
quelle
4
Ja, besonders wenn Sie mit dem Rand zentrieren müssen: auto. Dieser Fall Inline-Block ist nicht die Lösung.
Zsolt Szatmari
1
Beachten Sie auch, dass Sie den border-collapse: separate;Stil festlegen müssen, wenn Sie in diesem Element Polsterarbeiten ausführen möchten . In vielen Browsern ist dies die Standardeinstellung, aber häufig setzen CSS-Frameworks wie Bootstrap den Wert auf zurück collapse.
Ruslan Stelmachenko
Getestet auf MSIE 6 auf einem Windows Mobile 6.5-Telefon aus dem Jahr 2009: Es wird ordnungsgemäß zu einem Div in voller Breite (was auf einem Telefon wahrscheinlich kein Problem darstellt). Wenn jemand eine Version von Internet Explorer mit weniger als 8 auf einem Desktop verwendet, verwendet er ein nicht unterstütztes Betriebssystem (IE6 wurde mit XP geliefert, IE7 mit Vista). Ich würde sie auf eine Seite umleiten, auf der sie aufgefordert werden, auf GNU / Linux zu aktualisieren, wenn sie das Internet auf diesem Computer weiterhin sicher nutzen möchten.
Silas S. Brown
85

Es gibt zwei bessere Lösungen

  1. display: inline-block;

    ODER

  2. display: table;

Von diesen beiden display:table;ist besser, weil es display: inline-block;einen zusätzlichen Spielraum gibt.

Denn display:inline-block;Sie können die negative Randmethode verwenden, um den zusätzlichen Platz zu fixieren

Shuvo Habib
quelle
2
Haben Sie etwas dagegen zu erklären, warum display:tablees besser ist?
Nathaniel Ford
1
Für die Anzeige: Inline-Block müssen Sie die negative Randmethode verwenden, um den zusätzlichen Abstand festzulegen.
Shuvo Habib
8
@NathanielFord display:tablebelässt das Element im Blockformatierungskontext, sodass Sie seine Position wie gewohnt mit Rändern usw. steuern können. display:-inline-*Auf der anderen Seite wird das Element in den Inline-Formatierungskontext versetzt, sodass der Browser den anonymen Block-Wrapper um ihn herum erstellt, der das Zeilenfeld mit den geerbten Einstellungen für Schriftart / Zeilenhöhe enthält, und den Block in dieses Zeilenfeld einfügt (Ausrichten) standardmäßig vertikal nach Grundlinie). Dies beinhaltet mehr "Magie" und damit mögliche Überraschungen.
Ilya Streltsyn
43

Ich weiß nicht, in welchem ​​Kontext dies erscheinen wird, aber ich glaube, dass die CSS-artige Eigenschaft diesen Effekt floatentweder hat leftoder righthaben wird. Auf der anderen Seite hat es auch andere Nebenwirkungen, z. B. das Umschweben von Text.

Bitte korrigieren Sie mich, wenn ich falsch liege. Ich bin mir nicht 100% sicher und kann es derzeit nicht selbst testen.

falstro
quelle
1
Ja, in CSS 2.1. (CSS2.0 würde den Float in voller Breite machen, aber nur IE5 / Mac macht das tatsächlich). Tabellen und Floats sind die einzigen Anzeigetypen, die an ihren Inhalt angepasst werden können.
Bobince
41

Die Antwort auf Ihre Frage liegt in der Zukunft, mein Freund ...

"intrinsic" kommt nämlich mit dem neuesten CSS3-Update

width: intrinsic;

Leider ist der IE damit im Rückstand und unterstützt es noch nicht

Mehr dazu: CSS Intrinsic & Extrinsic Sizing Module Level 3 und Kann ich verwenden? : Intrinsic & Extrinsic Sizing .

Vorerst muss man zufrieden sein <span>oder sich darauf <div>einstellen

display: inline-block;
Trojaner
quelle
12
intrinsicals Wert ist nicht Standard. Es ist tatsächlich so width: max-content. Siehe die MDN-Seite zu diesem oder dem bereits verknüpften Entwurf.
Maryisdead
34

Eine CSS2-kompatible Lösung ist zu verwenden:

.my-div
{
    min-width: 100px;
}

Sie können Ihr Div auch schweben lassen, wodurch es so klein wie möglich wird. Sie müssen jedoch einen Clearfix verwenden, wenn etwas in Ihrem Div schwebt:

.my-div
{
    float: left;
}
Soviut
quelle
3
Es sollte. Welchen Doctype verwenden Sie?
Soviut
34
width:1px;
white-space: nowrap;

funktioniert gut für mich :)

Daft Wullie
quelle
Aber andererseits war mein Fall Text in einem Div und keine Tabelle wie die OP.
Rui Marques
Für den UI-Schieberegler von jquery ist dies großartig, da Sie die Breite des Inhaltselements nicht
festlegen müssen
26

OK, in vielen Fällen müssen Sie nicht einmal etwas tun, wie es div standardmäßig heightund widthautomatisch getan hat , aber wenn dies nicht der Fall ist, inline-blockfunktioniert das Anwenden der Anzeige für Sie ... Schauen Sie sich den Code an, den ich für Sie erstellt habe, und es funktioniert Was suchen Sie:

div {
  display: inline-block;
}
<div>
  <table>
    <tr>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultrices feugiat massa sed laoreet. Maecenas et magna egestas, facilisis purus quis, vestibulum nibh.</td>
      <td>Nunc auctor aliquam est ac viverra. Sed enim nisi, feugiat sed accumsan eu, convallis eget felis. Pellentesque consequat eu leo nec pharetra. Aenean interdum enim dapibus diam.</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ultrices feugiat massa sed laoreet. Maecenas et magna egestas, facilisis purus quis, vestibulum nibh.</td>
    </tr>
  </table>
</div>

Alireza
quelle
22

Dies wurde in Kommentaren erwähnt und ist in einer der Antworten schwer zu finden:

Wenn Sie display: flexaus irgendeinem Grund verwenden, können Sie stattdessen Folgendes verwenden:

div {
    display: inline-flex;
}

Dies wird auch in allen Browsern weitgehend unterstützt.

youngrrrr
quelle
Dies ist, was ich brauchte, als ich bereits benutztedisplay: flex;
Denny
19

Sie können dies einfach mit display: inline;(oder white-space: nowrap;) tun .

Ich hoffe, Sie finden das nützlich.

miksiii
quelle
18

Sie können inline-blockals @ user473598 verwenden, aber Vorsicht vor älteren Browsern.

/* Your're working with */
display: inline-block;

/* For IE 7 */
zoom: 1;
*display: inline;

/* For Mozilla Firefox < 3.0 */
display:-moz-inline-stack;

Mozilla unterstützt Inline-Block überhaupt nicht, aber sie haben -moz-inline-stackungefähr das Gleiche

Einige browserübergreifende inline-blockAnzeigeattribute: https://css-tricks.com/snippets/css/cross-browser-inline-block/

Einige Tests mit diesem Attribut finden Sie unter: https://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

RPichioli
quelle
1
Worüber redest du? Mozilla Firefox unterstützt inline-blockseit 3.0 (2008). Quelle: developer.mozilla.org/en-US/docs/Web/CSS/…
Chazy Chaz
18

Fügen Sie einfach einen Stil in Ihre CSS-Datei ein

div { 
    width: fit-content; 
}
Hamza
quelle
1
Ich denke nicht, dass dies eine browserübergreifende Option ist.
David Rector
2
Derzeit funktioniert nicht in Edge: caniuse.com/#search=fit-content
Molsson
Sie können -moz-fit-contentfür FF verwenden, vermutlich erlauben die anderen Herstellerpräfixe ihre eigenen ...
Benj
1
Dies ist das gleiche wie die Antwort von Vitalii Fedorenko
mfluehr
18
<table cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td>
            <div id="content_lalala">
                this content inside the div being inside a table, needs no inline properties and the table is the one expanding to the content of this div =)
            </div>
        </td>
    </tr>
</table>

Ich weiß, dass die Leute manchmal keine Tische mögen, aber ich muss Ihnen sagen, ich habe die CSS-Inline-Hacks ausprobiert und sie haben in einigen Divs funktioniert, in anderen jedoch nicht. Es war also wirklich einfacher, das expandierende Div einzuschließen Eine Tabelle ... und ... kann die Inline-Eigenschaft haben oder nicht, und dennoch ist die Tabelle diejenige, die die Gesamtbreite des Inhalts enthält. =)

Edward
quelle
2
Es ist nicht der "richtige" Weg, aber IE6 / 7/8 spielt oft einfach nicht gut, wenn die Dinge etwas kompliziert werden, also verstehe ich vollkommen, warum Sie es so machen würden. Du hast meine Stimme bekommen.
Craigo
Ich würde das tun, aber ich muss jedes einzelne Eingabefeld umgeben, das ist also viel zusätzliches HTML.
NickSoft
15

Eine funktionierende Demo ist hier-

.floating-box {
    display:-moz-inline-stack;
    display: inline-block;

    width: fit-content; 
    height: fit-content;

    width: 150px;
    height: 75px;
    margin: 10px;
    border: 3px solid #73AD21;  
}
<h2>The Way is using inline-block</h2>

Supporting elements are also added in CSS.

<div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
</div>

Abrar Jahin
quelle
13

Meine CSS3-Flexbox-Lösung in zwei Varianten: Die obere verhält sich wie eine Spannweite und die untere verhält sich wie ein Div und nimmt mit Hilfe eines Wrappers die gesamte Breite ein. Ihre Klassen sind "top", "bottom" und "bottomwrapper".

body {
    font-family: sans-serif;
}
.top {
    display: -webkit-inline-flex;
    display: inline-flex;
}
.top, .bottom {
    background-color: #3F3;
    border: 2px solid #FA6;
}
/* bottomwrapper will take the rest of the width */
.bottomwrapper {
    display: -webkit-flex;
    display: flex;
}
table {
    border-collapse: collapse;
}
table, th, td {
    width: 280px;
    border: 1px solid #666;
}
th {
    background-color: #282;
    color: #FFF;
}
td {
    color: #444;
}
th, td {
    padding: 0 4px 0 4px;
}
Is this
<div class="top">
	<table>
        <tr>
            <th>OS</th>
            <th>Version</th> 
        </tr>
        <tr>
            <td>OpenBSD</td>
            <td>5.7</td> 
        </tr>
        <tr>
            <td>Windows</td>
            <td>Please upgrade to 10!</td> 
        </tr>
    </table>
</div>
what you are looking for?
<br>
Or may be...
<div class="bottomwrapper">
    <div class="bottom">
    	<table>
            <tr>
                <th>OS</th>
                <th>Version</th> 
            </tr>
            <tr>
                <td>OpenBSD</td>
                <td>5.7</td> 
            </tr>
            <tr>
                <td>Windows</td>
                <td>Please upgrade to 10!</td> 
            </tr>
        </table>
    </div>
</div>
this is what you are looking for.

Lloyd Dominic
quelle
ein großes Lob für display: inline-flex;. Übrigens funktioniert dies ohne Präfix für Chrome 62, Firefox 57 und Safari 11
Horacio
12
<div class="parentDiv" style="display:inline-block">
    // HTML elements
</div>

Dadurch entspricht die übergeordnete Div-Breite der größten Elementbreite.

Jaimin Dave
quelle
Gibt es eine Möglichkeit, dies nur für die vertikale Größe anzuwenden, um die horizontale Größe zu minimieren und zu halten?
Gobliins
12

Versuchen Sie es display: inline-block;. Damit es browserübergreifend kompatibel ist, verwenden Sie bitte den folgenden CSS-Code.

div {
  display: inline-block;
  display:-moz-inline-stack;
  zoom:1;
  *display:inline;
  border-style: solid;
  border-color: #0000ff;
}
<div>
  <table>
    <tr>
      <td>Column1</td>
      <td>Column2</td>
      <td>Column3</td>
    </tr>
  </table>
</div>

James
quelle
11

Ich habe Firebug manipuliert und den Eigenschaftswert gefunden, -moz-fit-contentder genau das tut, was das OP wollte und wie folgt verwendet werden kann:

width: -moz-fit-content;

Obwohl es nur unter Firefox funktioniert, konnte ich für andere Browser wie Chrome kein Äquivalent finden.

Hamed Momeni
quelle
Ab Januar 2017 werden IE (alle Versionen, einschließlich Edge und Mobile) und Opera Mini nicht unterstützt fit-content. Firefox unterstützt nur die Breite. Andere Browser unterstützen es gut.
Gavin
11

Sie können diesen Code ausprobieren. Folgen Sie dem Code im Abschnitt CSS.

div {
  display: inline-block;
  padding: 2vw;
  background-color: green;
}

table {
  width: 70vw;
  background-color: white;
}
<div>
    <table border="colapsed">
      <tr>
        <td>Apple</td>
        <td>Banana</td>
        <td>Strawberry</td>
      </tr>
      <tr>
        <td>Apple</td>
        <td>Banana</td>
        <td>Strawberry</td>
      </tr>
      <tr>
        <td>Apple</td>
        <td>Banana</td>
        <td>Strawberry</td>
      </tr>

    </table>
</div>

Showrin Barua
quelle
7

Ich habe ein ähnliches Problem gelöst (bei dem ich es nicht verwenden wollte, display: inline-blockweil das Element zentriert war), indem ich ein spanTag innerhalb des divTags hinzugefügt und die CSS-Formatierung vom äußeren divTag zum neuen inneren spanTag verschoben habe. Wirf dies einfach als eine andere alternative Idee raus, wenn display: inline blockes keine passende Antwort für dich ist.

Jessica Brown
quelle
7

Wir können eine der beiden Möglichkeiten für das divElement verwenden:

display: table;

oder,

display: inline-block; 

Ich bevorzuge display: table;es, alle zusätzlichen Leerzeichen für sich zu verwenden , da sie alle zusätzlichen Leerzeichen alleine verarbeiten. Während display: inline-blockbenötigt etwas mehr Platz Befestigung.

Anfänger
quelle
6
div{
  width:auto;
  height:auto;
}
AJchandu
quelle
Dies funktioniert nicht, wenn div Inline-Elemente (oder Inline-Block-Elemente) enthält und diese eine andere Schriftgröße und Zeilenhöhe haben als div selbst.
QuotesBro
5

Wenn Sie Container haben, die Zeilen brechen, nach Stunden nach einer guten CSS-Lösung suchen und keine finden, verwende ich jetzt stattdessen jQuery:

$('button').click(function(){

  $('nav ul').each(function(){
    
    $parent = $(this).parent();
    
    $parent.width( $(this).width() );
    
  });
});
nav {
  display: inline-block;
  text-align: left; /* doesn't do anything, unlike some might guess */
}
ul {
  display: inline;
}

/* needed style */
ul {
  padding: 0;
}
body {
  width: 420px;
}

/* just style */
body {
  background: #ddd;
  margin: 1em auto;
}
button {
  display: block;
}
nav {
  background: #bbb;
  margin: 1rem auto;
  padding: 0.5rem;
}
li {
  display: inline-block;
  width: 40px;
  height: 20px;
  border: solid thin #777;
  margin: 4px;
  background: #999;
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button>fix</button>

<nav>
  <ul>
    <li>3</li>
    <li>.</li>
    <li>1</li>
    <li>4</li>
  </ul>
</nav>

<nav>
  <ul>
    <li>3</li>
    <li>.</li>
    <li>1</li>
    <li>4</li>
    <li>1</li>
    <li>5</li>
    <li>9</li>
    <li>2</li>
    <li>6</li>
    <li>5</li>
    <li>3</li>
    <li>5</li>
  </ul>
</nav>

Cregox
quelle
Dies ist im Snippet für mich in Chrome sichtbar gebrochen; Wenn Sie ein zweites Mal auf die Schaltfläche "Beheben" klicken, werden andere Ergebnisse erzielt als beim ersten Klicken.
Mark Amery
@ MarkAmery auf meinem Mac Ich habe es gerade auf Chrome, Safari und Firefox ausprobiert und alles ist in Ordnung: keine sichtbaren Fehler, nichts auf der Konsole, konsistentes Verhalten. Vielleicht ist es etwas mit Windows ...
Cregox
5

Überarbeitet (funktioniert, wenn Sie mehrere untergeordnete Elemente haben): Sie können jQuery verwenden (siehe JSFiddle-Link)

var d= $('div');
var w;


d.children().each(function(){
 w = w + $(this).outerWidth();
 d.css('width', w + 'px')
});

Vergessen Sie nicht, die jQuery einzuschließen ...

Siehe die JSfiddle hier

Anleihenschmied
quelle
Dies ist kaputt, wenn Ihr Div mehrere Kinder hat; es setzt einfach die div-Breite auf die des ersten Kindes.
Mark Amery
@MarkAmery Bevor Sie eine negative Stimme abgeben, lesen Sie bitte die Frage sorgfältig durch. Sie haben nach einem Kind gefragt. Wenn Sie wirklich neugierig sind, wie es mit mehreren Kindern gemacht werden kann, lesen Sie die überarbeitete Antwort.
Bondsmith
4

Ich habe es versucht div.classname{display:table-cell;}und es hat funktioniert!

UnLoCo
quelle