Text neben Bild (nicht umflossen)

SirROG · 13 Juli 2014

Hallo :)
Ich würde gerne nen Text neben einem Bild platzieren, welches aber nicht vom Text umflossen wird sondern der Text rechts neben dem Bild ist wie im Anhangbild "richtig.jpg".
Mein Problem dabei ist, sobald die Textzeile zulang ist , wird der Text nicht neben dem Bild auf eine neue Zeile gebrochen sondern der gesammte Textblock ordnet sich unter dem Bild an (Anhangbild "falsch.jpg").

Kennt da wer ne einfache Lösung?

Hier mein bisheriger Code:

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html; charset=windows-1252" http-equiv="content-type">
    <title></title>
    <meta content="ROG Innovation" name="author">
    <style type="text/css">
               .bildlinks
    {
    float: left;
    margin: 0 10px 10px 0;
    padding: 2px;
    }
    .textrechts
    {
    float: left;
    margin: 0 0 10px 10px;
    padding: 2px;
    word-wrap: break-word;
    word-break: break-all;"
    }
    </style>

  </head>
  <body>
    <div class="bildlinks"> <img src="file:///C:/Users/Roger/Desktop/bild.jpg"></div>
    <div class="textrechts"> Link zentrierter Text neben  links zentriertem Bild<br>
    </div>
  </body>
</html>

Gruss
SirROG

eiskaltereistee · 13 Juli 2014

Hey,

ich glaube da fehlt width
Ich werde das gleich mal kurz durchtesten.

EDIT:

Hier die Lösung:

Code:

<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html; charset=windows-1252" http-equiv="content-type">
    <title></title>
    <meta content="ROG Innovation" name="author">
    <style type="text/css">
    .full {  
        width:210px;  
    }
  
    .bildlinks{
        float: left;
      
        width: 100px;
    }
  
    .textrechts{
        float: right;
        width: 100px;
        word-wrap: break-word;
        word-break: break-all;
    }
    </style>
  </head>
  <body>
    <div class="full">
        <div class="bildlinks"> <div style="width: 100px; height: 100px; background-color: black;"></div></div>
        <div class="textrechts"> Link zentrierter Text neben  links zentriertem Bild<br>
    </div>
    </div>
  </body>
</html>

EDIT2:

Code:

<div style="width: 100px; height: 100px; background-color: black;"></div>

Das halt durch dein Bild ersetzten.
//ich

SirROG · 14 Juli 2014

Vielen Dank eiskaltereistee :)

Klappt prima, bist besser als unser Mister Google ;) da hab ich nur unbrauchbare Lösungen gefunden

Dankenden Gruss
SirROG

Text neben Bild (nicht umflossen)

SirROG

Mitglied

Anhänge

eiskaltereistee

Mitglied

SirROG

Mitglied

Neueste Beiträge