div 내에서 CSS 위치 지정 div

Question

div에 div가있어서 문제가 발생합니다.

<div style="border:solid 20px #ccff33;border-radius:10px;height:300px;width:300px;margin:20px;display: inline-block"> 
    <img src="images/f35.jpg" style="margin-right:10px" /> 
    <div style="float:right;padding-left:10px; border-left:solid 1px #aaaaaa; font-size: 12px; display:inline-block"> 
     Some text here. 
    </div> 
</div> 

이이 함께 제공 : 사업부 내의 사업부는 이미지와 함께 인라인 표시되지 않는

. 기본적으로 텍스트는 포함 된 div 안에 있고 이미지의 오른쪽에 있어야합니다.

그냥 몇 가지 사항 : div가 필요합니다 (예 : 표가 아님). 스타일은 인라인이어야합니다.

Answer 1

float 이미지는 left이어야합니다. 그리고 두 공간을 모두 수용 할 수있는 충분한 공간이 있는지 확인하십시오. 그렇지 않으면 가장 오른쪽 요소가 새 행으로 분리됩니다. div 그리고 두 개 사이에 공백이 20px 인 경우가 아니면 margin-right 또는 padding-left 중 하나만 필요합니다.

<img src="images/f35.jpg" style="width:50%; float:left; margin-right:10px" /> 
<div style="width:50%; float:right; border-left:solid 1px #aaaaaa; font-size: 12px;"> 

Answer 2

Float 이미지 left 이후 수레 clear에 기억은을 내용으로 width와 div을주고 ... 여기

는 작업 바이올린 http://jsfiddle.net/feitla/xyYh5/

<div style="border:solid 20px #ccff33;border-radius:10px;height:300px;width:350px;margin:20px;display: inline-block"> 
    <img src="http://www.dothetest.co.uk/images/do-test.gif" style="margin-right:10px; float:left;" width="150"/> 
    <div style="float:right;padding-left:10px; border-left:solid 1px #aaaaaa; font-size: 12px; display:inline-block;width:160px;" > 
     Lorem ipsizzle break it down sure amizzle, consectetuer adipiscing elizzle. Nullam funky fresh velizzle. 
    </div> 
</div>