Wie richte ich Text inline mit Bild aus?

Wie richte ich Text unter Bild so aus? Wie richte ich Text inline mit Bild aus?

Hier Code: https://jsfiddle.net/vzjj9eLy/

html:

<span class="test"> 
    <img src="http://cdn.sstatic.net/Sites/stackoverflow/img/[email protected]?v=73d79a89bded&a" alt="asd" width="316" height="316"> 
    Lorem Ipsum is simply dummy text of the printing and typesetting 
    industry. Lorem Ipsum has been the industry's standard dummy text ever since 
    the 1500s, when an unknown printer took a galley of type and scrambled it to 
    make a type specimen book. 
</span>

css:

.test{ 
    display:block; 

} 
.test img{ 
    display:block; 
    position: relative; 
    left: 50px; 
}

Quelle

2016-06-22 Aurimas

Ich habe dich nicht bekommen. Versuchen Sie, das Bild mit CSS zu ändern? –

Zum img hinzufügen 'margin: 0 auto;' –

move text from span ... dann wird es auf der gesamten Breite des übergeordneten Elements sein – demo

Ist das, was Sie wollen?

HTML:

<span class = "test"> 
    <img src="http://cdn.sstatic.net/Sites/stackoverflow/img/[email protected]?v=73d79a89bded&a" alt="asd" width="316" height="316"> 
    <span class="test_text"> 
     Lorem Ipsum is simply dummy text of the printing and typesetting 
     industry. Lorem Ipsum has been the industry's standard dummy text ever since 
     the 1500s, when an unknown printer took a galley of type and scrambled it to 
     make a type specimen book. 
    </span> 
</span>

CSS:

.test{ 
    width: 50%; 
} 
img{ 
    float: right; 
} 
.test.test_text{ 
    float: left; 
}

Sie können es sehen Arbeits here

Quelle

2016-06-22 09:38:10 hulkinBrain

einfachste Weg, ich denken könnte, ich nur eine Tabelle verwendet geben Du hast eine Idee, aber du solltest ein Div verwenden und einen Rand nach links setzen.

<span class="test2"><img src="http://cdn.sstatic.net/Sites/stackoverflow/img/[email protected]?v=73d79a89bded&amp;a" alt="asd" width="316" height="316" /></span> 
    <table width="510" height="100" border="0"> 
     <tr> 
     <td width="63" height="96">&nbsp;</td> 
     <td width="437"><span class="test111">Lorem Ipsum is simply dummy text of the printing and typesetting 
      industry. Lorem Ipsum has been the industry's standard dummy text ever since 
      the 1500s, when an unknown printer took a galley of type and scrambled it to 
      make a type specimen book. </span></td> 
     </tr> 
    </table>

Quelle

2016-06-22 09:40:22

Um den Text in links ausrichten und dann kann es Bild, das Sie erstellen div Element verwendet. Bitte finden Sie unten den Code, den ich beigefügt habe css inline-

<div style="width:48%;float:left;vertical-align:bottom;margin:0px;">   
    Lorem Ipsum is simply dummy text of the printing and typesetting 
    industry. Lorem Ipsum has been the industry's standard dummy text ever since 
    the 1500s, when an unknown printer took a galley of type and scrambled it to 
    make a type specimen book. 
</div> 
<div style="width:50%;float:right;vertical-align:top;margin:0px;"> 
<img src="http://cdn.sstatic.net/Sites/stackoverflow/img/[email protected]?v=73d79a89bded&a" alt="asd" width="316" height="316"> 
</div>

Quelle

2016-06-22 09:43:50 IRSHAD

Wie richte ich Text inline mit Bild aus?

Antwort

Verwandte Themen