정확한 너비를 지정하지 않고 텍스트 너비와 이미지를 일치 시키십시오.

Question

죄송합니다. 나는 그것을 파악하고 지금까지 운이없는 대답을 찾고자 노력해 왔습니다.

<article> 
<img src="image.jpg"> 
    <p> Text </p> 
</article> 

텍스트가 이미지 아래에 배치됩니다 :

나는이 HTML이있다. 이제 텍스트를 이미지와 동일한 폭으로 만들려고하지만 이미지의 너비가 다르기 때문에 정확한 너비를 지정하고 싶지는 않습니다 (기사도 마찬가지입니다).

텍스트 너비를 이미지 너비 ie에 맞게 만들려면 어떻게해야합니까? 정확한 너비를 지정하지 않고 적시에 중단합니다.

종류의 안부와는 이미지가 세트 폭 아닌 경우

Answer 1

JQuery와 나는 유일한 해결책 CSS를 발견했다. 이것은 모든 브라우저에서 아직 작동하지 않을 수도 있지만, 주요 브라우저에서는 확실히 작동하는 것 같습니다.

article { 
    width: -moz-min-content; /* Firefox/Gecko */ 
    width: -webkit-min-content; /* Webkit */  
    width: min-content; 
} 

참조 바이올린 : http://jsfiddle.net/U2Vxr/

그리고 문제에 대한 전체 기사 : http://demosthenes.info/blog/662/Design-From-the-Inside-Out-With-CSS-MinContent

Answer 2

당신은이 작업을 수행하기 위해 자바 스크립트를 필요 감사합니다.

개인적으로 다음과 같이합니다.

HTML

<article> 
<img src="image.jpg" class="image" /> 
    <p> Text </p> 
</article> 

JS -

$("article").each(function(i, obj) { 
    var imgWitdh = $(obj).find(".image").width(); 
    $(obj).find("p").width(imgWidth); 
});