2014-09-25 2 views
-1
 <span><img src="1.png" style="padding-left:10px;float:left;"> 
<img src="2.png" style="margin-left:10px;float:left;"></span> 

이 바로 서로 옆에 두 개의 이미지, 나는 중간에 "에 ..."라는 텍스트를 삽입 할 넣습니다. 텍스트를 추가하려고하면 이미지의 새 줄이 시작됩니다.css : 두 이미지 사이에 텍스트를 나란히 놓는 방법?

+2

을하고있다. 다른 코드가이 문제를 일으키는 지 확인 했습니까? 두 이미지 사이의 텍스트가 아닌 이미지에서 수레를 사용하는 이유가 있습니까? 여기에 더 많은 컨텍스트를 사용할 수있는 것 같습니다. –

+0

왜 처음에는 수레를 사용하고 있습니까? 그들을 데리고 나와 당신이 묘사하는 것을 얻을 수 있습니다. – Quentin

+0

와우는 누군가가 downvote 폭격 습격에 갔던 것처럼 본다. upvoted 모든 대답 – user299709

답변

1

범위 '태그'이 경우, 두 이미지에 래퍼에 ' n은 쉽게 같이 그것을 여기

<span> 
<img src="1.png" style="padding-left:10px;float:left;"> 
<i style="float:left; padding-left:10px;"> into... </i> 
<img src="2.png" style="margin-left:10px;float:left;"> 
우리가, 계속 당신에게 답변을 제공하기위한 정보의 정말 스파 스 양의 example JSFiddle

+0

왜 downvote? 대답에 잘못된 것이 없습니다. – Fahad

+0

누군가가 미쳐서 모든 대답을 줄였습니다. 나는 다시 – user299709

+0

난 그냥 그것을 시도하고 그런 다음 텍스트 – user299709

-1

는 태그의 모든에 대한 style="float:left"보십시오. 그것들은 그것들을 왼쪽에 붙이게 할 것입니다. 당신은 그들 사이의 공간을 설정 여유를 갖고 싶어

(당신은 내가, 당신이 CSS를 자습서를 구글해야 무슨 말인지 이해하지 않는 경우. 당신이 당신의 웹 사이트의 스타일을 도움이 될 것입니다

+0

당신은 두 개의 떠 다니는 요소 사이에 인라인 텍스트를 넣을 수 없습니다. 또한 이미 이미지를 떠 다니는 것처럼 보입니다. –

1

당신은 모두로 설정할 수 있습니다 대신 '디스플레이 인라인 블록' '플로트 : 왼쪽'

"<span><img src="1.png" style="padding-left:10px;display:inline-block;"> into... 
<img src="2.png" style="margin-left:10px;display:inline-block;"></span>" 

하지만 당신은 '수직 정렬 : 중간'으로 설정해야 할 수도 있기 때문에, 수직 정렬의 인식 또는 '수직 정렬을 : 최고 당신은 캘리포니아

+0

이 실제로없는 서로 – user299709

+0

위에 모두 넣어 참조 [http://codepen.io/creativelikeadog/pen/Aivae, 그것은 스팬 '디스플레이 : 블록'을 갖는 경우에만 수행하는 것이되고 폭보다 작다 모든 너비의 합 –

관련 문제