CSS의 형제 이미지 / 자동 너비의 너비로 텍스트를 제한
문제
나는 본질적으로 "그림"요소 (html5에서 다가오는) 버전을 만들려고 노력하고 있으며, 그 아래에 간단한 설명이있는 이미지가 있습니다.
그러나이 전체 요소의 너비를 이미지의 너비로 제한하려고하므로 텍스트가 이미지보다 넓지 않습니다 (필요한 경우 여러 줄로 포장).
기본 HTML :
<div class="figure">
<img src="..." alt="..." width="..." height="..." /><br />
A description for the image
</div>
나는 CSS에 잘 맞지만 A를 추가하지 않고 순수한 CSS 솔루션을 생각할 수 없습니다. style="width:100px"
~로 div
이미지 너비와 일치합니다.
업데이트: 약간의 검색과 사고 후, 최상의 방법은 div에서 인라인 너비를 사용하는 것 같습니다. DIV가 이미지보다 약간 넓기를 원할 경우 이미지의 너비 속성을 유지합니다 (예 : 더 긴 캡션을 수용하기 위해).
이 접근법은 또한 아래 캡션과 함께 나란히 두 개의 이미지를 가질 수 있음을 의미합니다. 같은 크기의 이미지 세트가 있다면 물론 각 스타일을 추가 할 수 있습니다. div
.
대답 한 모든 분들께 감사드립니다!
해결책
스타일 시트
div.figure img,
div.figure div.caption {
width: 100%;
}
div.figure div {
overflow: hidden;
white-space: nowrap;
}
참고 : 포장을 활성화하려면 마지막 CSS 라인을 제거하십시오.
HTML
<div class="figure" style="width:150px;">
<img src="logo.png" alt="logo" />
<div class="caption">A description for the image</div>
</div>
Chrome, Firefox 및 IE7에서 확인했는데 세 가지 모두에서 좋아 보입니다. 나는 이것이 IMG가 아닌 DIV의 너비를 가지고 있다는 것을 알고 있지만 적어도 한 곳에서 너비를 설정하면됩니다. CSS 표현을 사용하지 않음 (즉, 즉) 외부 divs 너비를 첫 번째 자식 요소의 너비로 설정하는 방법을 볼 수 없습니다.
다른 팁
이것은 또한 사용하여 달성 될 수 있습니다 'display: table-caption'
다음과 같이 캡션의 경우 :
HTML
<div class="wrapper">
<img src="image.jpg" />
<div class="caption">My caption...</div>
</div>
스타일 시트
.wrapper {
display: table;
}
.caption {
display: table-caption;
caption-side: bottom;
}
이 블록은 다른 텍스트의 오른쪽에서 왼쪽으로 떠날 수도 있습니다. IE8+에서 이것을 테스트했습니다. JSBIN 예는 다음과 같습니다. http://jsbin.com/xiyevovelixu/1
이미지와 일치하도록 너비를 자동으로 설정하려면 사용할 수 있습니다.
.figure {
display: table;
width: 1px;
}
이것은 div가 테이블처럼 행동하게 만듭니다 (인터넷 익스플로러에서는 지원되지 않음). 또는 div 대신 테이블을 사용할 수 있습니다. 너비를 자동으로 설정하는 또 다른 방법이 있다고 생각하지 않습니다.
편집하다: 가장 간단한 방법은 자동 너비를 잊고 손으로 설정하는 것입니다. 실제로 필요한 경우 JavaScript 또는 테이블을 사용할 수 있습니다. 이 경우 html 버전의 한계를 해결하기 때문에 테이블 사용이 그다지 추악하지 않습니다. 서버 측 스크립팅의 경우 페이지를 생성 할 때 너비를 설정할 수도 있습니다.
나는 같은 문제가 있었고 읽은 후 이것 주변 요소에서 인라인 스타일을 사용하기로 결정했습니다. 나에게 테이블을 사용하는 것보다 더 나은 솔루션 인 것 같습니다.
당신은 사용할 수 있습니다 display:table
다른 모든 브라우저에 대한 솔루션 및 a CSS 행동 인터넷 익스플로러를 위해.