두 개의 인라인 블록 : 이미지 옆에 텍스트 넣기

2 개의 인라인 블록에 문제가 있습니다. 나는 오래 추가 할 때 문제가두 개의 인라인 블록 : 이미지 옆에 텍스트 넣기

.mainContainer { 
    height: 15px; } //doesn't matter in this case 

.additional { 
    line-height: 15px; } //doesn't matter in this case 

.description { 
    float: left; 
    display: inline; 
}

<img> 
<span>some long text next to the img</span>

나는 다음과 같은 한 구조 (내가 사용해야) :

<div class="mainContainer"> 
    <div class="additional"> 
     <div class="description"> 
       <img></img> 
     </div> 
     <div class="description"> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit...   
     </div>  
    </div> 
</div>

스타일 나는 이런 식으로 뭔가를 만들고 싶어 텍스트 일 경우 이미지는 텍스트 위에 있지만 그 옆에 있어야합니다.

http://jsfiddle.net/476fm/

어떤 제안 :

그것은 이런 걸 (I 코드에 추가하지만이 제거되어야한다)해야 하는가?

편집 : 을 내가 2 개 인라인 요소를 포함하는 하나 개의 주요 컨테이너 한 : 좋아 실제로 텍스트는 위의 유일한 예 내가 달성 원하는 것을 구체적이었다 - 첫 번째 요소는 이미지
이 - 두 번째는 너무 이미지가 텍스트 와 제가 싶어 할입니다 : 텍스트가 긴하고

http://jsfiddle.net/z2t7b/는 첫 번째 이미지 아래에 안 두 번째 줄에있을 필요가있을 때 -이 고정해야한다 (나는 누군가가 이해할 수 있기를 바랍니다 무엇 나하고 싶어)

출처

2013-01-21 qazah

http://jsfiddle.net/NgfSF/

은 '왼쪽으로 IMG를 float', 텍스트는 오른쪽으로 이동해야합니다. – diggersworld

나는 당신이 여기에서 원하는 것을 이해하려고 노력하고있다. 두 번째 이미지 옆의 설명과 함께 두 이미지를 나란히 표시하고 싶습니까? 아니면 각 이미지 옆에 설명이 필요하십니까? –

죄송합니다. 한 장 대신에 두 장의 사진을 추가했습니다. diggersworld와 (과) 같은 작품을 썼습니다. 하지만 내 응용 프로그램에서는 작동하지 않습니다. (나는 엉망이 있고 많은 컨테이너가 있다고 생각합니다 ...) – qazah

이것은 당신이 성취하려는 것입니까?

<div class="mainContainer"> 
    <div class="additional"> 
     <div class="description"> 
      <img></img> <div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit,</br> sed do eiusmod tempor incididunt ut labore</div> 
      <div class="breaker"></div> 
      <img></img><div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit,</br> sed do eiusmod tempor incididunt ut labore</div> 
     </div> 

    </div> 
</div> 

.mainContainer { 
    height: 23px; 
} 

.additional{ 
    line-height: 23px; 
} 

.description { 
    float:left; 
    display: inline; 
} 

.breaker {clear: both;} 

img { 
    background-color:#FFF; 
    width:20px; 
    height:20px; 
    display:inline-block; 
    border:solid black 1px; 
    float:left; 
}

Here is the fiddle

출처

2013-01-21 21:12:27

방금 코드를 업데이트했습니다. 위의 바이올린을보고 그것이 원하는 것인지 확인하십시오 :) –

글쎄, 인라인 요소, 바로 제거 : 자연 인라인 흐름은, 텍스트는 일반적으로 아래를 통과합니다, 적용됩니다 .. '플로트 왼쪽'.

OK, 지금은

는, 컨테이너 동작합니다은 블록을 가지고 있는지 확인은 왼쪽 오버 플로우를 추가 부동 (I hobe) 당신의 탐구를 understook : 숨겨진;

.description { 
padding-right:10px; 
float:left; 
display: inline; 
} 

.description1 { 
display: block; 
overflow: hidden; 
}

출처

2013-01-21 21:25:39

두 개의 인라인 블록 : 이미지 옆에 텍스트 넣기

답변

관련 문제