Testo flottante nel blocco accanto all'immagine

Question

Vorrei raggiungere il seguente posizionamento:

Due testi diversi (in blocco) fluttuanti/in linea accanto all'immagine. (Tutto dentro div).

Ho provato con diverse impostazioni di visualizzazione (blocco + in linea per testo ecc.) Ma non funziona ancora.

HTML:

<div class="res"> 
<img src="<?php echo 'img/'.$row["sType"].'.png';?>"/> 
<span>TITLEe</span> 
<span>Description</span> 
</div> 

CSS:

.res { 

    height:60px; 
    background-color:yellow; 
    border-bottom:1px solid black; 
    text-align:left; 

} 

.res img { 

    margin-top:8.5px; 
    margin-left:5px; 
    display:inline 
} 

.res span { 

    display:block; 
} 

Answer 1

HTML:

<div class="content"> 
    <img src="http://cdn4.iconfinder.com/data/icons/socialmediaicons_v120/48/google.png"/ alt="" > 
    <h3>Title</h3> 
    <p>Some Description</p> 
</div>​ 

CSS:

.content { 
    width: 400px; 
    border: 4px solid red; 
    padding: 20px; 
    overflow: hidden; 
} 

.content img { 
    margin-right: 15px; 
    float: left; 
} 

Answer 2

provare questo ..... dovrebbe funzionare

html:

<div id="testDiv"> 
    <div class="imgContainer"><img src="path/image.jpg" /></div> 
    <div class="textContainer"></div> 
</div> 

css:

#testDiv { float:left; width: 360px; } 
#testDiv .imgContainer { float:left; width:120px; height:90px; } 
#testDiv .textContainer { float:left; width:240px; height:90px; overflow:hidden } 

Answer 3

Penso che è necessario quanto segue:

HTML:

<div class="wrap"> 
    <img src="img.jpg" class='left;' /> 
    <h1 class='right'>TITLE</h1> 
    <div class='right'>Element description</div> 
</div> 

CSS:

.wrap { width: 600px; /* Just a sample value */ } 
.left { width: 200px; float: left; } 
.right { margin-left: 220px; width: 380px;} 

Questo dovrebbe fare il trucco. Regola i parametri di larghezza e margine in base alle tue esigenze.

Answer 4

bene si può provare il modo classico con tavoli anche se non è raccomandato l'uso di tabelle per il layout

<table> 
    <tr> 
    <th><img src="yourimage" /> </th> 
    <th >adsasd<br/>adas</th> 
    </tr> 
</table> 

Answer 5

Ciao perché ero abituato a fl avena sinistra si può fare questo senza utilizzata float come come questo

<div class="res"> 
<img src="<?php echo 'img/'.$row["sType"].'.png';?>"/> 
<div class="text"><h5>TITLEe</h5> 
    <p>Description</p></div> 
</div> 

Css

.res { 
    height:60px; 
    background-color:yellow; 
    border-bottom:1px solid black; 
} 
img, .text{ 
vertical-align:top; 
} 
.text{ 
display:inline-block; 
} 
p, h5{ 
margin:0; 
    padding:0; 
} 

Live demo

e cambiare per css, classe secondo il vostro disegno