머리말: 이전 4편의 글에서 주공게의 원리와 적용 사례를 소개했지만, 그 레이아웃에는 여전히 한계가 있습니다. 가장 큰 한계는 투명한 둥근 모서리가 있는 이미지를 사용할 수 없다는 점입니다. 투명한 외부 둥근 모서리를 사용할 수 없으면 이 레이아웃의 확장성이 크게 영향을 받고 레이아웃을 최대화할 수 없습니다. 이 글은 이 문제를 근본적으로 해결하기 위한 글이다.
이 문제의 근본 원인은 중앙의 왼쪽 및 오른쪽 테두리 열이 수직으로 동일한 높이라는 것입니다. 왜냐하면 부모 컨테이너는 독립 컨테이너가 아닌 상자의 전체 컨테이너이고 왼쪽 및 오른쪽 모서리 컨테이너는 상자의 전체 컨테이너이기 때문입니다. 아래쪽은 위쪽으로 음수 오프셋됩니다. 그 위로 이동하면 배경색이 차단됩니다. 따라서 둥근 컨테이너 안의 이미지가 반투명하거나 투명한 경우 투명한 부분에는 왼쪽과 오른쪽 테두리의 이미지 배경이 표시됩니다.
나는 " Unbreakable Nine-square Grid Layout "의 이전 모델을 만들 때 이미 이 문제를 발견했습니다. 그 당시에도 둥근 모서리 그림을 만들기 위해 투명한 둥근 모서리 그림을 사용했습니다. 그러나 나중에 이 문제를 발견한 후에는 문제를 줄이기 위해 투명한 둥근 모서리 그림도 사용했습니다. 이 문제를 피하기 위해 투명한 둥근 모서리 부분에 기본 컨테이너와 동일한 배경색을 추가했습니다. 하지만 이 방법은 결국 궁극적인 해결책이 아닙니다. 일상 작업에서는 반투명하고 둥근 모서리를 사용하여 인터페이스를 사용자 정의해야 합니다. 따라서 해당 기사에서는 문제를 근본적으로 해결하지 않고 회피했습니다. 기사가 나간 후, 세심한 친구가 시험해 본 후 마침내 이 질문을 제기했습니다. 하하, 제가 게으르면 이 문제를 피할 수 없는 것 같습니다.
문제의 원인을 알고 나면 문제를 해결하는 것은 간단합니다.
내 글은 " 깨지지 않는 구공격자 배치 "라는 글을 바탕으로 작성되었기 때문에, 아직 그 글을 읽지 않으셨다면, 먼저 글을 읽고 나서 이 글을 읽어보시는 것이 좋을 것 같습니다. 이것은 소화에 도움이 될 것입니다!
이 문제를 해결하려면 중간 부분에 구조적인 변화를 주어야 할 것 같습니다. 왼쪽 및 오른쪽 테두리 컨테이너가 콘텐츠 영역과 세로로 동일한 높이가 되기를 원하기 때문에 즉, 콘텐츠 영역의 텍스트 콘텐츠 높이가 변경되면 왼쪽 및 오른쪽 테두리의 높이가 동시에 조정됩니다. 이는 동일한 높이의 일반적인 3열 레이아웃입니다. 그런데 제가 흔히 보는 3단 레이아웃과 조금 다른 점은 가운데 콘텐츠 영역의 너비가 가운데 너비 전체를 채우길 원하는데, 너비의 100%가 아니라 100%에서 너비를 뺀 것입니다. 왼쪽 및 오른쪽 열 테두리. 이 너비는 백분율이 아니며 모두 고정된 픽셀 값을 갖습니다. 이 문제는 이전 기사에서 언급한 방법을 사용하여 해결해야 합니다.
이렇게 하려면 원래 구조를 변경해야 합니다.
【구조층】
가운데에 있는 세 개의 왼쪽, 가운데, 오른쪽 컨테이너에 상위 컨테이너를 추가하고 이에 대한 클래스 이름 middle을 정의합니다. 그런 다음 가운데 영역의 구조는 이제 다음과 같습니다.
콘텐츠 영역< p>