CSS의 형제 이미지 / 자동 너비의 너비로 텍스트를 제한

StackOverflow https://stackoverflow.com/questions/617386

  •  03-07-2019
  •  | 
  •  

문제

나는 본질적으로 "그림"요소 (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 행동 인터넷 익스플로러를 위해.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top