div 너비를 단일 하위 요소의 너비로 제한

이미지 캡션을 사용하고 싶습니다. figure 태그가 IE8 이하에서 지원되지 않기 때문에 <div>에 <img>이 포함되어 있고 캡션이 도움이 될 것이라고 생각했습니다.div 너비를 단일 하위 요소의 너비로 제한

그러나 캡션이 내 <img>보다 넓은 경우 <div> 너비가 캡션 너비로 확장됩니다. 이로 인해 <img> 옆에 여백이 생깁니다. 대신 자막을 줄 바꿈하고 싶습니다.

수동으로 <div> 너비를 <img> 너비와 같게 설정할 수 있습니다. 또는 필요한 경우 캡션에 <br />을 수동으로 삽입하십시오. 그러나 더 우아한 해결책이 있기를 바랬습니다.

예를 들어

이 jsfiddle

출처

2013-05-08 RubenGeert

작업 바이올린을 참조하십시오http://jsfiddle.net/uNDRx/3/

CSS :

div.rimg { 
    display:table; 
    width:1px; 
    float:right; 
    border:1px solid #aaa; 
    border-radius:5px; 
    overflow:hidden; 
    margin:10px; 
} 
div.rimg img { 
} 
div.rimg span { 
    margin:10px; 
}

HTML :

<body> 
<h2>Pellentesque habitant morbi tristique senectus et netus</h2> 
    <div class="wrapper"> 
     <div class='rimg'> 
      <img src='https://dl.dropboxusercontent.com/u/116120595/tree_1_200_200.jpg' alt=''><span>What an exceptionally beautiful tree</span> 
     </div>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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus 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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus 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. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</div> 
    </div> 
</body>

출처

2013-05-08 08:02:17 Arbel

감사 만! 놀랍게도 그것이 작동합니다 ...'overflow : hidden' 이후로'img'의'1px' 만 볼 수 있습니다. – RubenGeert

여러분을 환영합니다! 당신에게 도움이되기를 기쁘게 생각합니다. 'overflow : hidden;을 안전하게 제거 할 수 있습니다. 유스 케이스가있는 경우 최소한의 변경을 원했기 때문에 거기에 두었습니다. 테이블 디스플레이에서 오버 플로우는 위의 코드에서 고정 레이아웃 테이블에서만 작동하며'table-layout : fixed;'를 div.ring에 추가하면 오버플로가 숨겨지고 div의 너비가 1px가되어야합니다! – Arbel

OK, 나에게는 더 이상 잠들지 않는 밤이 없습니다. :-) 약간 둥근 모서리가있는 ''을 제공하기 위해'overflow : hidden'과'border-radius'를 조합했습니다. 어느 지금 잘 작동합니다! – RubenGeert

div 너비를 단일 하위 요소의 너비로 제한

답변

관련 문제