mille
Erfahrenes Mitglied
Hey.
Ich habe eine Reihe von Bildern, welche untereinander angezeigt werden sollen.
Neben den Bildern steht ein variabler Text, der auch in der Länge relativ kurz sein kann, was zur Folge hat, dass nur 1 oder 2 Zeilen Text da stehen. Das Ausmaß des Textes ist in seiner Höhe also kleiner, als das zugehörige Thumbnail.
Wie das ganze falsch aussieht, füge ich unten als Screenshot an.
als erstes habe ich folgendes einfaches Html konstrukt
hier das zugehörige CSS:
Nun mein PRoblem.
Ich möchte, das die einzelnen Div-Container immer den gleichen vertikalen Abstand zu einander haben. Daher kann ich bei der "height" keine 100px angeben, wie ich es als Notlösung vorerst getan habe.
Das Problem seht ihr hier, wenn ich der produktBox einen blauen Rahmen zuweise:
LINK
Unter dem Thumbnail mit der Bildbeschreibung ist noch viel Platz, da das Thumbnail nur 50px hoch ist und mit dem Text darunter sich eine höhe von 60px ergibt. es sind also 40px Freiraum.
Gebe ich nun als höhenangabe "height: auto" bei produktBox an, passiert folgendes:
LINK
Die automatische Höhe bezieht sich also nur auf den eingegebenen Text, nicht aber auf das DIV mit der Höhe des Bildes. Die Höhe des DIVs "produktBox" wird also nicht automatisch angepasst.
Wie kann es das ganze so lösen, dass produktBox immer genau so hoch ist wie das "höchste" (height-Ausmaß) Element innerhalb dieses DIVs?
Danke für eure Hilfe.
mille
Ich habe eine Reihe von Bildern, welche untereinander angezeigt werden sollen.
Neben den Bildern steht ein variabler Text, der auch in der Länge relativ kurz sein kann, was zur Folge hat, dass nur 1 oder 2 Zeilen Text da stehen. Das Ausmaß des Textes ist in seiner Höhe also kleiner, als das zugehörige Thumbnail.
Wie das ganze falsch aussieht, füge ich unten als Screenshot an.
als erstes habe ich folgendes einfaches Html konstrukt
HTML:
<div class="produktBox">
<div class="produktPic">
<img src="bildname.jpg" />
name des Bildes <!-- steht unter dem Bild -->
</div>
<div class="produktBeschreibung">
<div class="shortTextBox">
kurzer text (1-3 Zeilen)
</div>
</div>
<div class="clearDiv"></div>
</div>
CSS:
.produktBox{
position: relative;
display: block;
margin: 0px;
margin-bottom: 5px;
width: 100%;
height: 100px;
padding: 0px;
}
.produktPic{
position: relative;
margin-left: 0px;
margin-top: 0px;
width: 100px;
float: left;
text-align: left;
font-family: Verdana, Arial;
font-size: 10px;
font-weight: bold;
color: black;
padding: 0px;
overflow: hidden;
}
.produktBeschreibung{
position: relative;
margin-left: 105px;
margin-top: 0px;
width: 189px;
height: 100%;
font-family: Verdana, Arial;
font-size: 10px;
text-align: left;
color: black;
}Nun mein PRoblem.
Ich möchte, das die einzelnen Div-Container immer den gleichen vertikalen Abstand zu einander haben. Daher kann ich bei der "height" keine 100px angeben, wie ich es als Notlösung vorerst getan habe.
Das Problem seht ihr hier, wenn ich der produktBox einen blauen Rahmen zuweise:
LINK
Unter dem Thumbnail mit der Bildbeschreibung ist noch viel Platz, da das Thumbnail nur 50px hoch ist und mit dem Text darunter sich eine höhe von 60px ergibt. es sind also 40px Freiraum.
Gebe ich nun als höhenangabe "height: auto" bei produktBox an, passiert folgendes:
LINK
Die automatische Höhe bezieht sich also nur auf den eingegebenen Text, nicht aber auf das DIV mit der Höhe des Bildes. Die Höhe des DIVs "produktBox" wird also nicht automatisch angepasst.
Wie kann es das ganze so lösen, dass produktBox immer genau so hoch ist wie das "höchste" (height-Ausmaß) Element innerhalb dieses DIVs?
Danke für eure Hilfe.
mille
Zuletzt bearbeitet:
