래퍼 Div의 너비를 하위 이미지의 너비에 맞게 동적으로 조정하려면 어떻게 해야 합니까?

래퍼를 하위 이미지 너비에 맞게 조정

문제:

목표는 디자인하는 것입니다. 하위 이미지의 너비에 따라 너비를 동적으로 조정하는 래퍼입니다. 즉, 래퍼는 고정된 너비를 가져서는 안 되며 포함된 이미지의 너비를 수용해야 합니다.

예:

제공된 코드는 래핑된 이미지를 보여줍니다. 빨간색 테두리가 있는 래퍼 div에 있습니다. 그러나 래퍼 div는 현재 고정된 너비를 나타내므로 바람직하지 않은 모양으로 이어집니다.

<div>

목표:

원하는 결과는 겹치지 않고 시각적으로 매력적인 레이아웃을 허용하는 하위 이미지의 너비 text:

<div>

해결책:

이를 달성하기 위한 한 가지 색다른 접근 방식은 래퍼에 대한 display: table 속성을 활용하는 것입니다. 래퍼 너비를 1%로 설정하면 하위 이미지가 이 너비를 재정의하고 실제 크기를 가정하여 래퍼 너비를 효과적으로 결정합니다.

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

이 솔루션은 다음을 위한 간단하고 효과적인 방법을 제공합니다. 자식 이미지의 너비에 맞는 래퍼를 만들어 시각적으로 매력적인 레이아웃을 보장합니다.

위 내용은 래퍼 Div의 너비를 하위 이미지의 너비에 맞게 동적으로 조정하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!