Html Div höhe?
Ich habe 2 Divs mit dem Style .text{ float: left;} nebeneinander der erste hat 2 Zeilen Text, der zweite hat 5 Zeilen Text. Das hat zur Folge, das der erste eine höhe von 2 Zeilen, der zweite eine Höhe von 5 Zeilen hat. Nun möchte ich, dass sich die höhe vom ersten automatisch an die höhe des zweiten anpasst (egal wie viel Zeilen der zweite hat z.B. 10, 12, usw.).
2 Antworten
Das geht mit Float nicht oder nur sehr sehr umständlich. Deshalb habe ich dir schon Flexbox vorgeschlagen. Damit lässt sich so was eben ganz einfach machen und ich gebe solche Tipps nicht ohne Grund. Hier ein Beispiel:
https://jsfiddle.net/Babelfisch/x1ja5kw8/
HTML
<div class="wrapper">
<div class="box">
Das ist Zeile 1<br>
Das ist Zeile 2
</div>
<div class="box">
Das ist Zeile 1<br>
Das ist Zeile 2<br>
Das ist Zeile 3<br>
Das ist Zeile 4<br>
Das ist Zeile 5
</div>
</div>
CSS
.wrapper {
display: flex;
flex-direction: row;
}
.wrapper .box {
margin: 10px;
padding: 20px;
background-color: silver;
}
Und so sieht das dann aus:
Schau dir mal Grid an
https://www.w3schools.com/css/css_grid.asp
Einfach und klarere Anzeige
Hierzu rate ich dir besser GRID zu benutzen
Float ist zum genauen anzeigen und vor allem auch beim responsable Design sehr hinderlich
Wie lautet der Code wenn unter den beiden boxen, eine lange (width:100%) box ist