대각선 이미지로 텍스트를 정렬하는 방법
게시 됨: 2022-02-16
한 OSTraining 고객은 두 요소 사이에 공간을 유지하면서 대각선 이미지 옆에 텍스트를 정렬하는 방법을 요청했습니다.
내 첫 번째 생각은 텍스트의 특정 지점에 브레이크라인을 추가하는 것이지만 사이트가 반응형이기 때문에 작동하지 않았습니다.
고객과 이야기를 나눈 후 우리는 더 우아한 솔루션을 생각해 냈습니다 ...
사용 사례
이 예에서 텍스트는 왼쪽에, 이미지는 오른쪽에 정렬해야 합니다. 여기서 진짜 문제는 텍스트가 이미지 위에 겹쳐서는 안 된다는 것입니다. 우리가 원하는 결과는 아래와 같습니다.
해결책
동적 너비 값으로 오른쪽에 떠 있는 빈 div를 추가하여 텍스트가 이미지를 오버레이하지 않도록 할 수 있습니다. 이 예에서 이미지는 CSS를 사용하여 배경으로 추가됩니다.
HTML
이 예제의 HTML은 다음과 같습니다.
<div> <div class="spacing"></div> <div class="spacing"></div> <div class="spacing"></div> <div class="spacing"></div> <div class="spacing"></div> <div class="spacing"></div> <div class="spacing"></div> <div class="spacing"></div> <div class="spacing"></div> <div class="spacing"></div> <div class="spacing"></div> <div class="spacing"></div> <div class="spacing"></div> <div class="spacing"></div> <p>A buch of dummy text goes here...</p> </div>공백 클래스가 있는 여러 개의 빈 div를 확인할 수 있습니다. 일부 CSS와 결합된 이러한 요소는 텍스트와 이미지 사이에 간격을 생성합니다.
간격 div의 수는 이미지 높이를 채우는 데 필요한 텍스트 줄 수와 같습니다. 이 예에서 이미지는 14줄로 덮어야 합니다.
CSS
더 나은 설명을 위해 필요한 CSS를 여러 부분으로 나눕니다.
#container { background-image: url(bg.png); background-repeat: no-repeat; background-position: right top; background-size: 300px auto; min-height: 300px; }특정 위치와 크기로 이미지를 배경으로 정의합니다.
#container p { line-height: 22px; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 14px; }#container p 선택자는 텍스트를 참조합니다. 나중에 다른 속성의 값을 계산하려면 글꼴 크기와 줄 높이를 정의하는 것이 매우 중요합니다.
.spacing { float: right; clear: right; height: 22px; }이 속성은 빈 div가 오른쪽에 뜨도록 지시합니다. 높이 값은 단락에서 줄 높이 에 사용하는 것과 동일합니다.
.spacing:nth-child(1) { width: 305px; } .spacing:nth-child(2) { width: 283px; } .spacing:nth-child(3) { width: 261px; } .spacing:nth-child(4) { width: 239px; } .spacing:nth-child(5) { width: 217px; } .spacing:nth-child(6) { width: 195px; } .spacing:nth-child(7) { width: 173px; } .spacing:nth-child(8) { width: 151px; } .spacing:nth-child(9) { width: 129px; } .spacing:nth-child(10) { width: 107px; } .spacing:nth-child(11) { width: 85px; } .spacing:nth-child(12) { width: 63px; } .spacing:nth-child(13) { width: 41px; } .spacing:nth-child(14) { width: 19px; }
위의 코드는 계산기를 사용해야 할 수도 있는 재미있는 부분입니다.
.spacing:nth-child(1) 에 대해 선택한 너비 값은 간격 클래스가 있는 첫 번째 div에 적용됩니다. 같은 방식으로 .spacing:nth-child(2) 는 간격 요소에 도달할 때까지 약간 더 작은 너비 등을 정의합니다. 숫자 14.
오른쪽의 각 빈 div에 대해 높은 값에서 낮은 값으로 동적 값을 정의하는 이유는 이미지를 오버레이하지 않고 텍스트를 왼쪽에 정렬된 상태로 유지하는 것을 가능하게 합니다.
즉, 빈 div 각각의 너비를 어떻게 계산할 수 있습니까? 대답에는 다음 값을 기반으로 하는 작은 공식이 필요합니다.
- 텍스트의 줄 높이 (내 예에서는 22px)
- 배경 크기 (이 예에서는 300px)
첫 번째 빈 div의 너비는 305픽셀이며, 이는 정의된 배경 너비에 텍스트가 이미지의 가장자리에 너무 가까워지는 것을 방지하기 위해 포함하기로 결정한 추가 5픽셀의 값입니다.
응답 지원
예제 코드를 사용하면 모든 화면 크기에서 디자인이 잘 작동합니다. 데모를 보고 브라우저의 크기를 조정하여 실제로 작동하는지 확인하십시오.
데모 보기
보너스: 적게
CSS로 직접 이동하는 한 가지 대안은 LESS입니다. LESS를 처음 사용하는 경우 자습서가 있습니다.
LESS를 사용하여 동일한 결과를 생성하여 수학에 대한 걱정 없이 쉽게 간격 클래스가 있는 각 div에 대해 여러 너비 값을 동적으로 생성할 수 있습니다.
@textHeight: 22px; @backgroundWidth: 300px; @extraSpacing: 5px; @initialWidth: @backgroundWidth + @extraSpacing; @textLines: @backgroundWidth / @textHeight;변수를 통해 텍스트의 높이와 배경 너비를 결정합니다.
#container { background-image: url(bg.png); background-repeat: no-repeat; background-position: right top; background-size: @backgroundWidth auto; min-height: @backgroundWidth; }컨테이너의 속성입니다.
#container p { line-height: @textHeight; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: @textHeight - 8; } .spacing { float: right; clear: right; height: @textHeight; }일부 변수를 기반으로 동적으로 계산된 텍스트 및 간격 속성.
.generate-spacing(@i, @end) when (@i <= @end) { .spacing:nth-child(@{i}) { width: @initialWidth - ((@i - 1) * @textHeight); } .generate-spacing((@i + 1), @end); } .generate-spacing(1, @textLines);모든 빈 div에 대한 동적 너비를 생성하는 루프입니다.
Codepen에서 이 코드 테스트