CSS는 - 당신이 지금 볼 수 있듯이 DIV 폭이

<html><head> 
 
    <title></title> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
 
    <style type="text/css"> 
 

 
    .box {background:gray;border:3px solid black;float:left;} 
 

 
    </style> 
 
</head> 
 

 
<body> 
 
    
 
<div class="box"> 
 
    <img src="http://i.stack.imgur.com/shWOu.jpg"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis ante ac sapien pellentesque vitae condimentum odio euismod. In purus nibh, ullamcorper in suscipit non, scelerisque eget sem. </p> 
 
</div> 
 
</body></html>

위의 이미지 크기에 따라 검은 색 테두리 상자 내부 컨텐츠에 적응 자동 폭을 갖는다. 문제는 상자의 크기를 내부의 이미지 너비에 맞게 조정해야한다는 것입니다. 예를 들어 이미지의 너비가 빨간색 상자 인 경우 아래의 텍스트는 파란색 점으로 끝나고 새 줄로 이동해야합니다.

하지만 어떻게해야합니까?

출처

2011-03-30 donpedroper

기존 HTML 및 CSS는 무엇입니까? – BoltClock

이동 : http://pastehtml.com/view/1duy9p9.html – donpedroper

CMS 또는 데이터베이스에서 이미지/캡션 콘텐츠를 동적으로 생성 하시겠습니까? –

귀하의 요청에 문제가 DIV 특정 폭이없는 경우 텍스트가 없다는 것입니다

희망을 좋아하는 경우에

#the-image-itself, #the-comment{ 
display: block; 
}

을 설정할 수 있습니다 "알기"언제 래핑 할 것이고 그 이유는 아웃터 div의 너비를 사용하는 이유입니다 ...

그래서 ... 아웃터 div에 너비를 추가하거나 이미지를 둘러싼 div를 사용할 때 + 텍스트, 해당 div의 너비.

는 편집 : 여기

당신은 이동 : http://jsfiddle.net/jnmtu/

내가 (내 예에 세 번째입니다) 테스트를 만든 테이블을 먼저 테스트하고 그것이 어떻게 작동하는지 내 마음을 새로 고침 테이블을 만든 다음 CSS 방식으로 적용했습니다.

작동 방법 : 당신은 최소한의 폭 (1 %)가 주위 사업부를 가지고 있고,이 테이블로 표시 할 필요가

; 내부 div ("셀"에 해당)는 자동 높이와 숨겨진 오버플로를 가져야합니다. div의 width + height를 늘리려면 "강제"해야합니다 (일반적인 트릭입니다).

참고 : Internet Explorer에서는 테스트하지 않았지만 Firefox와 Safari에서는 작동합니다.

출처

2011-03-30 11:18:48 jackJoe

Thanks :)! 너비 (1 %)가있는 작은 해킹이지만 jquery보다이 솔루션을 더 선호합니다 ... – donpedroper

작은 해킹, 나는 그 말장난을 좋아합니다 :) 어쨌든 CSS는 테이블에 비해 몇 가지 결점이 있습니다. 나는 대부분의 브라우저에서 이것을 시도해 보았지만 IE7만이 "좋아"하지 않는다. 작동이 가능할 수도 있고, 또 다른 해킹으로 해결할 수도있다. 그렇게 할 수 있다는 것을 아는 것은 멋진 일입니다. – jackJoe

내가 제대로 이해하면

이미지 사업부 (검은 색 테두리)과 같은 크기 인 경우는 텍스트가 자동으로 당신이 원하는 것을 할 것입니다. 또는 div에 overflow: none;을 입력하십시오.

하지만 개인적으로 나는 그것을 좋아하지 않을 것입니다. div는 유연하고 확장 가능합니다. 그래서 나는 2 ~ 3 개의 div를 사용한다고 말할 것입니다.

<div id="black-border"> 

<div id="for-image"> 

<div id="the-image-itself"> 
<img src="image.jpg"/> 
</div> 

<div id="the-comment"> 
<p> This image is awesome</p> 
</div> 

</div> 

</div>

이미지를 고정 크기로 제공하고 댓글을 입력하십시오. 당신은 또한 당신이 도움이 :)

출처

2011-03-30 11:03:17 Kay

나는 당신이 나를 오해 한 것 같아요 :) 붙여 넣은 HTML 예제를 보았습니까? 설명하는 텍스트가 위의 이미지와 같은 너비를 갖기를 원합니다. 불행히도 예제와 함께 작동하지 않았습니다. ( – donpedroper

@JackJoe는 내부 이미지의 너비에 맞게 너비를 줄 바꿈 div로 설정해야한다고 말했습니다. http://jsfiddle.net/audetwebdesign/bpN8x/

는 기본적으로, 이미지의 폭을 결정하고 래퍼 DIV의 폭을 설정하기 위해 jQuery를 사용

여기 그것을하는 방법 중 하나입니다.

또는 CMS에서 이미지를 공급하는 경우 이미지의 너비를 동적으로 결정한 다음 인라인 스타일을 사용하여 래퍼 div의 너비를 설정할 수 있습니다.

콘텐츠가 배치 될 때 상자 모델이 너비를 결정하는 방식 때문에 CSS 전용이라고 생각하지 않습니다. 너비는 부모 요소에서 상속되며 자식 요소에서 넘어지지 않습니다.

출처

2011-03-30 11:38:02

어, 나는 jquery로 "해결 방법"이 있다는 것을 알았지 만 CSS 대신 고정시킬 수 있기를 바랐다. 당신의 솔루션은 효과가있다.하지만 CSS 솔루션이 있는지 기다려 볼 것이다.) – donpedroper

나는이 HTML/CSS 패턴이 내가 생각했던 것만 큼 분명하지 않기 때문에 다른 대답을 보는 것이 흥미로울 것이다. 의견을 보내 주시면 감사하겠습니다. –

Google 검색이 컨테이너 그러나

에 폭을 연결하지 않고도 만족스러운 방법으로이 질문은 백만 번 요청되었다는 사실을 throw하지 여전히 있다는 것을 ...

이 내 생각 테이블 요소에 의해 가장 잘 처리되는 작업입니다. 테이블 요소에는 작업을위한 도구라고 할 수있는 caption 요소가 있습니까?

IE6/7을 제외한 모든 브라우저에서 다음 코드를 잘 처리합니다. IE6/7은 너비만큼 처리하지만 CSS caption-side 속성을 지원하지 않으므로 캡션을 이미지 아래에 놓지 않습니다. 이는 수도 있고 문제가되지 않을 수 있습니다 - 이럴 여전히 꽤 볼 것이다 (그 프레임))하지만 YMMV는, 어쩌면 다른 당신이 정말 스크립트에

<div class="content"> 
<table summary="image with caption"> 
<caption> 
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. 
</caption> 
<tr> 
<td><img src="http://dummyimage.com/300x300/dad/fff" width="300" height="300" alt="This image is awesome"></td> 
</tr> 
</table> 
</div>

CSS의 폭을 원하지 않는 경우 :

.content { 
    float: left; 
    padding: 20px; 
    border: 2px solid #000; 
} 

.content table { 
    border: 0; 
    border-collapse: collpase; 
} 

.content td { 
    padding: 0; 
} 

.content caption { 
    caption-side: bottom; 
}

출처

2011-03-30 15:08:54 clairesuzy

표가 사용 된 경우 캡션 태그가 필요하지 않고 너비는 1 % 만 필요합니다. 내 예에서 내 세 번째 항목을 확인하십시오. – jackJoe

네, 맞아요. 나에게도 "해킹"을 느낍니다. 너비에 대한 해킹인데, "캡션"에 대한 두 번째 행의 사용은 엄밀히 말하면 테이블을 통한 해킹 일 것입니다 이미 IE7 캡션을 원한다면 확실히 선택할 수 있습니다. ** 캡션 요소 **의 올바른 사용이 가능할 때 해킹을 사용합니다. 뭐야? ;) – clairesuzy

필요한 것은 너비 Android 레이아웃에서 width : wrap-content라는 availabe와 비슷합니다. 어쩌면 이것이 CSS 디자인에 도움이 될 것입니다.

출처

2012-12-04 14:42:29

FWIW 내가 생각 해낸 가장 작은 JQuery와 빠른이

<div class="caption_wrap" style="float:right"> 
<img src="IMAG0332.jpg" onload="jQuery(this).parent().width(jQuery(this).width());"/><br /> 
this is some caption text, this is some caption text, this is some caption text, this is some  
caption text</div>

입니다.

출처

2012-12-05 15:18:31

CSS는 - 당신이 지금 볼 수 있듯이 DIV 폭이

답변

관련 문제