Umschließen von Ein-Zeilen-Divs um ein Bild (nicht Text)

Question

Ich versuche, dass sich eine Menge divs um ein Bild wickeln, aber es gelingt mir nicht.

Da das Einfügen von HTML in StackOverFlow nicht zu funktionieren scheint, hier ist mein aktueller Versuch, einen Outlook 2010 Kontakt-Eintrag zu emulieren.

Quelle von: http://www.perfmon.com/download/contactdivtest.htm (bearbeiten: oder schau dir @Hristos coolen Online-Editor an)

.contactLarge{
    width: 250px;
    height: 220px;
}
 img.picture {
    margin-left: 0px;
    margin-bottom: 0px;
    float: left;
}
.contactLarge item{
}

Titel

First, Last 
First, Last 
First, Last 
First, Last 
Nachname, Vorname
Firmenname
Titel
Arbeit#
Mobil#
Zuhause
E-Mail1
E-Mail2
E-Mail3
Straße
Stadt,
Bundesland
PLZ
httpseite
IM

Kann mir jemand sagen, was ich tun muss, damit sich alle divs nach oben bewegen und sich um das Bild wickeln? Ich hoffe wirklich, dass mir nichts Einfaches fehlt...

Hier ist das Layout, das ich zu erreichen versuche:

alt text http://perfmon.com/download/contactdivtest.bmp

Answer 1

Ein

ist ein Block-Level-Element - das bedeutet, dass es automatisch zu einer neuen Zeile gewechselt wird und eine Breite von 100% hat. Ohne Ihren HTML- oder CSS-Code zu sehen, ist es schwer zu erkennen, wo der Fehler liegt, aber versuchen Sie es mit float:

div {
    float: right;
    width: 50%;
}

Bearbeiten:
Jetzt, wo Sie ein Bild davon gepostet haben, was Sie möchten, kann ich sagen, dass Sie wahrscheinlich etwas Ähnliches wie dies wollen:
HTML:

        Blah blah
        Mehr blah blah

CSS:

#content {
    width: 60%;
    float: right;
}  

Vergewissern Sie sich einfach, dass die Breite des Bildes + die Breite des inneren divs kleiner ist als die Breite des umgebenden divs.

Answer 2

Für Ihre spezifische Lösung könnte besser für Sie funktionieren:

Überprüfen Sie die Version mit :

.contactLarge{
    width: 250px;
    height: 220px;
}
.contactLarge span{
    font-weight: bold;
}
 img.picture {
    margin-left: 0px;
    margin-bottom: 0px;
    float: left;
}
.contactLarge item{
}

Titel  

First, Last  
First, Last  
First, Last  
First, Last  
Nachname, Vorname  
Firmenname  
Titel  
Arbeitsnummer  
Handynummer  
Zuhause  
E-Mail1  
E-Mail2  
E-Mail3  
Straße  
Stadt  
Bundesland  
Postleitzahl  
Website  
IM

Answer 3

Div ist ein Block-Level Element. Es nimmt die volle Breite ein und generiert einen Zeilenumbruch davor und danach.

Img ist standardmäßig ein Inline-Element. Sie möchten es in ein anderes Element einfügen (nicht floaten). Verwenden Sie entweder anstelle von span (span ist das Inline-Gegenstück zu div) oder setzen Sie das CSS-Attribut display auf inline beim div.

Answer 4

Ein sehr nützlicher Trick für solche Dinge ist das "display: inline-block".

Es zeigt Dinge inline an (damit das Umbruch funktioniert), lässt Ihnen aber fast die volle Konfigurierbarkeit eines Block-Elements.

Answer 5

Wenn Sie einen "Textbox" div um Ihren Text erstellen und ihn links floaten, sollte alles gut funktionieren. Siehe:

.contactLarge{
    width: 250px;
    height: 220px;
}
 img.picture {
    margin-left: 0px;
    margin-bottom: 0px;
    float: left;
}
.textbox {
    float: left;
}
.contactLarge item{
}

Titel

First, Last 
First, Last 
First, Last 

First, Last 
Nachname, Vorname
Firmenname
Titel
Arbeitsnummer
Handynummer
Zuhause
E-Mail 1
E-Mail 2

E-Mail 3
Straße
Stadt,
Bundesland
PLZ
httpseite
im