Как выровнять изображение рядом с текстом внутри контейнера?

Question

Вот, ИС скрипку полный код

http://jsfiddle.net/0ad96zyr/1/

.ads-container 
{ 
width: 274px; 
height: 913px; 
margin-top: 55px; 
} 

Вот мой контейнер

это должно быть, как это http://imgur.com/nRJpbPA

Я попытался использовать поплавок и выровнять, но он не работает любезно помогите мне пожалуйста.

Спасибо!

Answer 1

вам просто нужно удалить float: left из .ads-prod-text и играть с margin и padding немного. Нет позиционирование не требуется:

FIDDLE

CSS

.ads-container{ 
    width: 274px; 
    height: 913px; 
    margin-top: 55px; 
} 

.ads-ul{ 
    list-style-type: none; 
} 

.ads-li{ 
    width: 274px; 
    height: 185px; 
    background-color: #f7f7f7; 
    padding: 8px; //add padding to container for spacing  
} 

.ads-prod-title{ 
    text-align: left; 
    display: inline-block; //add so it doesnt take full width 
} 

.ads-prod-icons{ 
    padding: 0px; 
    margin: 0px; 
    float:right; 
} 

.ads-prod-img{ 
    float: left; 
    margin: 20px 0 0 0; //add for spacing   
} 

.ads-prod-text{ 
    /*float: left;*/ //remove 
    margin: 40px 0 0; //add for spacing   
} 

Answer 2

Вы должны абсолютную позицию текста и дать заданную ширину к нему, как этот http://jsfiddle.net/0ad96zyr/2/

.ads-prod-text{ 
left:130px; 
width:120px; 
position:absolute; 
} 

Answer 3

Положите ширину на вашем ads-prod-text классе.

http://jsfiddle.net/Delorian/5mf170fb/

.ads-prod-text { 
    float: left; 
    width: 177px; 
} 

Answer 4

ads-prod-text 
{ 

    width : 170px; /* new added, but depend on width on container */ 
    float: left; 

} 

http://jsfiddle.net/0ad96zyr/5/ обновленный :)