2013-11-22 2 views
0
<div id="item"> 
    <img src="/images/01.jpg" /> 
</div> 

<div id="item"> 
    <img src="/images/02.jpg" /> 
</div> 

각 DIV (항목)에 이미지의 너비에 따라 "너비"를 부여하고 싶습니다. 이미지의 너비가 다릅니다.DIV 너비는 IMG 너비에 따라 달라집니다.

+2

'ID'은 고유해야합니다. –

+0

jQuery를 사용해야합니까? – George

답변

0

jQuery를 사용하지 않아도됩니다. CSS를 통해이 모든 것을 성취 할 수 있습니다. 당신이 항목을 뜨고 그 다음 분명, 당신은 예상 된 결과 달성 할 경우 다음

div { 
    float: left; 
    clear: both; 
} 

있어 jsFiddle Demo

당신은 이미지를로드 할 수 있도록 폭을 calulated 전에 기다려야 할 것이다
0

jQuery(function() { 
    $('.item img').load(function(){ 
     var $this = $(this); 
     $this.parent().width($this.width()); 
    }) 
}) 

데모 :하므로 I는 CLA를 ID로 변경 또한

요소의 ID가 고유해야 Fiddle s 값

0

HTML 편집. ID는 고유해야합니다. http://jsfiddle.net/wSLMV/

단순히 태그를 참조 사항 (divimg : 다른 답변 중

<div class="item"> 
    <img src="/images/01.jpg" /> 
</div> 

<div class="item"> 
    <img src="/images/02.jpg" /> 
</div> 


.item 
{ 
    padding:1px 1px 1px 1px; 
    margin: 1px 1px 1px 1px; 
    position:relative; 
    float:left; 
} 
0

, 나의 제안은 요소 여기

div { 
    display: inline-block; 
} 
img { 
    display: block; 
} 

에 대해 다음 CSS를 설정하는 예제입니다). #item이나 을 참조하려면 id 속성이 고유해야한다는 점에 유의하십시오. class으로 바꾸고 싶습니다.

<div class="item"> 
    <img src="/images/01.jpg" /> 
</div> 

다음 CSS에서이를 참조 :

.item { 
    display: inline-block; 
} 
.item > img { 
    display: block; 
} 
관련 문제