한 줄에 요소 배치

휴대 전화에서 divs 인라인을 표시하는 데 문제가 있습니다. 그래서 코드는 PC에서 잘 작동하지만 모바일에서 내 웹 사이트를 방문하면 올바른 방법으로 div가 표시되지 않습니다.한 줄에 요소 배치

이미지 div가 텍스트가있는 div보다 위에 있습니다 (인라인이어야 함). 이것은 너비의 경우가 아닙니다. 이미지 너비를 5px로 변경하더라도이 작은 이미지는 여전히 옆에 있지 않습니다.

예 : http://www.filmypodobnedo.pl/matrix/

모든 것은 하나 (예 : 매트릭스)를 선택하는 유사한 영화의 목록에 관한 나열 영화 (이미지 + 텍스트, 인라인 표시 PC에서 작동 할 수 있지만 모바일한다).

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

출처

2013-11-14 Lethysek

추가 display:inline-block#zdjecie_podobne 및 #tekst_podobne

출처

2013-11-14 17:19:17 SaturnsEye

여전히 나던 작업 : 작업을 나던/ – Lethysek

사업부 "podobny_film"고정 픽셀 너비와 DIV "tekst_podobne와 DIV"zdjecie_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%; }

출처

2013-11-14 17:23:46

그 :/ 내가 생각하는 그 폭 또는 열 크기의 인도 표준시 문제. 왜냐하면 이미지 너비 jus를 1px로 설정하더라도이 그림 픽셀은 텍스트 위에 놓이기 때문입니다. – Lethysek

이 :) 작동합니다 :

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

출처

2013-11-14 17:33:18 Zsigoveny

아직도 작동하지 않습니다 : / – Lethysek

한 줄에 요소 배치

답변

관련 문제