Позиционирующие элементы в одной строке

Question

У меня проблема с перемещением divs inline на мобильных телефонах. Так что код отлично работает на ПК, но когда я нахожу свой сайт в мобильном телефоне, я просто не показываю divs правильным способом.

Изображение div находится над div с текстом (должно быть встроенным). Это не случай ширины, потому что даже если я меняю ширину изображения на 5 пикселей, это маленькое изображение все еще находится выше не рядом.

Пример: http://www.filmypodobnedo.pl/matrix/

Всего вещь о перечислении подобных фильмов, чтобы выбрали один (в примере матрицы), перечисленные фильмы (IMAGE + TEXT должен быть отображен в строке, которая работает на компьютере, но не на мобильном телефоне).

HTML:

<div class="podobny_film"> 
<div id="zdjecie_podobne"> 
<img class="featured-project-image" width="100" height="150" alt="Filmy podobne do Equilibrium" src="http://www.filmypodobnedo.pl/photos/Equilibrium.jpg"> 
</div> 
<div id="tekst_podobne"> 
</div> 

CSS:

.podobny_film { 
float: left; 
width: 80%; 
color: #555555; 
border-style: dashed; 
border-width: 1px; 
border-color: black; 
padding: 10px; 
} 
#zdjecie_podobne {  
width: 120px; 
float: left; 
} 
#tekst_podobne { 
width: 75%; 
float: left; 
font-size: 16px; 
} 

Answer 1

добавить display:inline-block к #zdjecie_podobne и #tekst_podobne

Answer 2

ДИВ "podobny_film" содержит Див "zdjecie_podobne" с фиксированной шириной пикселя и DIV «tekst_podobne "с процентной шириной. Попробуйте использовать процентную ширину для div «zdjecie_podobne», а также для изображения, тогда он не должен ломаться.

#zdjecie_podobne {  
width:24%; /*together with tekst_podobne that's 99% so be aware of any margins or paddings that might sum up > 100%!*/ 
float: left; 
} 

.featured-project-image { width:100%; } 

Answer 3

Это должно работать :):

#zdjecie_podobne {  
    width: 120px; 
    float: left; 
    display:inline-block; 
    } 
    #tekst_podobne { 
    width: 75%; 
    float: left; 
    font-size: 16px; 
    display:inline-block; 
    }