Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 14.05.2012, 23:41
Innocentus Innocentus ist offline
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.06.2007
Beiträge: 31
Innocentus befindet sich auf einem aufstrebenden Ast
Pfeil Höhe von Bildern an Text-(DIV-)Höhe anpassen

Ein DIV mit Text und mit voreingestellter maximaler Breite (max-width) wird links gefloatet, drei Bilder werden rechts davon untereinander gefloated.
Die Höhe des DIVs mit Text kann je nach Viewport-Breite stark variieren, das Layout ist flexibel.

HTML-Code:
[...]
<style type="text/css">
div#text {
float: left;
width: 70%;
max-width: 800px;
}


div#images {
float: right;
width: 30%;
}

div#images img {
width: auto;
height: 33.3%;
max-width: 200px;
max-height: 150px;
}
</style>
[...]
<div id="text">
Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test

<div style="clear:both"></div>
</div>

<div id="images">
<img alt="" src="/images/test1.png"></img><br />
<img alt="" src="/images/test2.png"></img><br />
<img alt="" src="/images/test3.png"></img>

<div style="clear:both"></div>
</div>
[...]
Nun soll sich die Höhe der Bilder gleichmäßig an die Höhe des links nebenstehenden DIVs anpassen.
Dies ist bei dem jetzigen Code leider nicht der Fall, die Bilder nehmen die voreingestellte, maximal mögliche Höhe (max-height) und die damit verbundene Breite (width: auto) ein.

background-size (CSS3) kann aus Kompatibilitätsgründen leider nicht verwendet werden.

Vielen Dank für eure Antworten im Voraus!
Mit freundlichen Grüßen
Inno

Geändert von Innocentus (14.05.2012 um 23:55 Uhr)
Mit Zitat antworten
Sponsored Links