래퍼 Div를 하위 이미지의 너비와 유연하게 일치시키는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

래퍼 Div를 하위 이미지의 너비와 유연하게 일치시키는 방법은 무엇입니까?

Linda Hamilton

풀어 주다： 2024-11-24 19:59:53

원래의

322명이 탐색했습니다.

How to Make a Wrapper Div Fluidly Match the Width of a Child Image?

래퍼 Div가 하위 이미지의 너비에 맞게 조정되는지 확인하는 방법

문제: 어떻게 구성합니까? div의 너비를 유지하면서 하위 이미지의 최대 너비를 사용하는 래퍼 div 유동적인가요?

해결책:

한 가지 색다른 접근 방식은 래퍼 div의 표시 속성을 "테이블"로 설정하고 너비를 "1%"로 설정하는 것입니다. 이렇게 하면 이미지가 래퍼의 너비 제한을 초과하고 래퍼에서 자체 크기를 주장합니다.

.wrapper {
  border: 1px solid red;
  display: table;
  width: 1%;
}

로그인 후 복사

<div class="wrapper">
  <img src="http://www.fillmurray.com/284/196">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ornare dictum ligula quis dictum. Nam dictum, eros sit amet imperdiet aliquet, ligula nisl blandit lectus, quis malesuada nunc ipsum ac magna. Vestibulum in magna eu sem suscipit molestie.
    Maecenas a ligula molestie, volutpat turpis et, venenatis massa. Nam aliquam auctor lectus ac lacinia. Nam consequat lacus porta odio hendrerit mollis. Etiam at congue est, eu fermentum erat. Praesent vestibulum malesuada ante. Cum sociis natoque
    penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>

로그인 후 복사

이 해결 방법을 사용하면 div가 이미지의 너비에 동적으로 맞춰질 수 있습니다. 너비가 명시적으로 설정되지 않았습니다.

위 내용은 래퍼 Div를 하위 이미지의 너비와 유연하게 일치시키는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!