Tekst pływający w bloku obok obrazu

Question

chciałbym osiągnąć następujące Umiejscowienie:

dwa różne teksty (w bloku) pływający/inline obok obrazu. (Wszystko w div).

Próbowałem z różnymi ustawieniami wyświetlania (blok + wbudowany dla tekstu itp.), Ale nadal nie działa.

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

spróbować ..... powinno działać

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

myślę, potrzebne są następujące:

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;} 

To powinno wystarczyć. Dostosuj parametry szerokości i marginesów do swoich potrzeb.

Answer 4

dobrze można spróbować klasyczny sposób przy użyciu tabel choć nie zaleca się używać tabel dla układu

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

Answer 5

Cześć, dlaczego używałeś fl owies lewo można to zrobić bez stosowanego float tak jak to

<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

i zmienić css, klasy według projektu