Zwei Bilder, versch. Größen am Boden ausrichten

NT2005 · 30.04.2011

Hallo ihr im Webbereich,

Ich möchte zwei Bilder nebeneinander positionieren (mit einen kleinen Abstand). Die Bilder sind unterschiedlich groß und wenn ich nun unter den Bildern weiter schreiben will, so schneidet das größere Bild den Text und es entsteht ein Textumbruch.

Was muss ich machen, damit die Bilder am Boden bündig sind?

Code:

<html>
    <head>
        <title>Html Grafiktest</title>
        <style type="text/css">
            #bilder{
                width: 500px;
                margin-left: auto;
                margin-right: auto
            }
        </style>
    </head>
    <body>
        <div id="bilder">
                <img style="float: left;" width="180px" height="240x" border="1"/>
                <img style="float: right;" width="180px" height="300x" border="1"/>
                <br style="clear:left;">
                Ein Text mit ohne Inhalt und Sinn! Dennoch ist er nützlich!
        </div>
    </body>
</html>

AlexLindert · 30.04.2011

AW: Zwei Bilder, versch. Größen am Boden ausrichten

Hi NT2005,

du musst einfach dem linken Bild einen margin-top von 60px geben (=Differenz zwischen den beiden Bildern)

Code:

<html>
    <head>
        <title>Html Grafiktest</title>
        <style type="text/css">
            #bilder{
                width: 500px;
                margin-left: auto;
                margin-right: auto
            }
           [COLOR=Red] #abstand{
                margin-top: 60px;
            }[/COLOR]
        </style>
    </head>
    <body>
        <div id="bilder">
                <img [COLOR=Red]id="abstand"[/COLOR] style="float: left;" width="180px" height="240x" border="1"/>
                <img style="float: right;" width="180px" height="300x" border="1"/>
                <br style="clear:left;">
                Ein Text mit ohne Inhalt und Sinn! Dennoch ist er nützlich!
        </div>
    </body>
</html>

Herr_D · 30.04.2011

AW: Zwei Bilder, versch. Größen am Boden ausrichten

wieso floatest du denn die Bilder?

Code:

        <div id="bilder">
                <img style="width:180px;height:240px; border:1px solid #fff" /> <img style="width:180px; height:300px; border:1px solid #fff" />
                <br>
                Ein Text mit ohne Inhalt und Sinn! Dennoch ist er nützlich!
        </div>

reicht vollkommen... und darauf achten, dass du korrekt schreibst (wird weite und höhe per html definiert ohne px im css mit maßeinheit)

natürlich muss mehr als 360px platz sein auf dem Bildschirm

NT2005 · 02.05.2011

AW: Zwei Bilder, versch. Größen am Boden ausrichten

Hallo ihr Zwei und danke fuer die Antworten.
Wenn ich Ds Variante nehme, wie bekomme ich am Besten Text zentriert unter jeden einzelnen Bild?

AlexLindert · 02.05.2011

AW: Zwei Bilder, versch. Größen am Boden ausrichten

Ich würde es so machen:

Code:

<html>
    <head>
        <title>Html Grafiktest</title>
        <style type="text/css">
            #bilder{
                width: 500px;
                margin-left: auto;
                margin-right: auto
            }

            #bild1{
            margin-top: 60px;
            width: 180px;
            float: left;
            text-align: center;
            }

            #bild2{
            width: 180px;
            float: right;
            text-align: center;
            }
        </style>
    </head>

    <body>
         <div id="bilder">
                <div id="bild1">
                <img style="width:180px;height:240px; border:1px solid #fff" />
                Ein Text mit ohne Inhalt und Sinn! Dennoch ist er nützlich!
                </div>

                <div id="bild2">
                <img style="width:180px; height:300px; border:1px solid #fff" />
                Ein Text mit ohne Inhalt und Sinn! Dennoch ist er nützlich!
                </div>

                <br style="clear: both;">
         </div>
    </body>
</html>

NT2005 · 02.05.2011

AW: Zwei Bilder, versch. Größen am Boden ausrichten

Hallo Alex,

Danke, denn das Ergebnis ist super... jedoch sind die Bilder Variabel in der Höhe (immer verschiedene Bilder), somit denke ich nicht, das ich mit margin-top: 60px; verwenden kann.

Herr_D · 02.05.2011

AW: Zwei Bilder, versch. Größen am Boden ausrichten

NT2005 schrieb:
Hallo ihr Zwei und danke fuer die Antworten.
Wenn ich Ds Variante nehme, wie bekomme ich am Besten Text zentriert unter jeden einzelnen Bild?

Das ist natürlich 'ne ganz neue Herausforderung

...

Hier könnte man natürlich böse sein und sagen, dass solche Zurschaustellungen (auch) tabellarische Daten sind (und dann der td ein vertical-align:bottom; text-align:center zuordnen

)

Alles andere wird jetzt sehr umständlich

cebito · 02.05.2011

AW: Zwei Bilder, versch. Größen am Boden ausrichten

NT2005 schrieb:
Hallo ihr Zwei und danke fuer die Antworten.
Wenn ich Ds Variante nehme, wie bekomme ich am Besten Text zentriert unter jeden einzelnen Bild?

Ist die Bildbreite immer gleich, oder ist die auch variabel?

NT2005 · 03.05.2011

AW: Zwei Bilder, versch. Größen am Boden ausrichten

Hallo ihr Zwei,

@Herr-D
Also eine Tabelle...Okay ich versuche es mal. Danke.

@Cebito
Querbeet sind die Größen der Bilder. Nicht übergroß oder winzig, aber unterschiedlich.