두 개의 열이 있는데 그 중 일부는 다음의 값을 회전 시키려고합니다.
http://jsfiddle.net/MTyFP/1/
<div class="container">
<div class="statusColumn"><span>Normal</span></div>
<div class="statusColumn"><a>Normal</a></div>
<div class="statusColumn"><b>Rotated</b></div>
<div class="statusColumn"><abbr>Normal</abbr></div>
</div>
이 CSS로 :
.statusColumn b {
writing-mode: tb-rl;
white-space: nowrap;
display: inline-block;
overflow: visible;
transform: rotate(-90deg);
transform-origin: 50% 50%;
}
다음과 같이 보입니다 :
텍스트가 다른 요소와 겹치지 않도록 회전 된 요소가 부모의 높이에 영향을 미치는 CSS를 작성할 수 있습니까? 다음과 같은 것 :
- 답변 # 1
- 답변 # 2
안타깝게도 (?) 이것은 요소를 회전하더라도 여전히 특정 너비와 높이를 가지고 있지만 회전 후에도 변경되지 않는 방식입니다. 시각적으로 변경하지만 물건을 회전 할 때 크기를 변경하는 보이지 않는 줄 바꿈 상자가 없습니다.
90 ° 미만으로 회전한다고 상상해보십시오 (예 :
The percentage is calculated with respect to thewidthof the generated box's containing block, even for 'padding-top' and 'padding-bottom'.If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1.
갑자기, 당신은
.rotation-wrapper-inner
를 가지고 있지 않습니다 그리고.element-to-rotate
당신이 회전 한 개체의,하지만 당신은 또한transform: rotate(45deg)
그리고width
주변의 "보이지 않는 상자"의 이 객체의 외부 너비를 요청한다고 상상해보십시오. 무엇을 반환합니까? 물체의 너비 또는 새 상자? 우리는 어떻게 두 가지를 구별합니까?따라서이 동작을 수정하기 위해 작성할 수있는 CSS가 없습니다 (또는 "자동화"해야합니다). 물론 부모 컨테이너의 크기를 직접 늘리거나 JavaScript를 작성하여 처리 할 수 있습니다.
(확실히
height
를 사용해보십시오. 앞에서 언급 한 사각형을 얻으려면)사양에 설명 된대로 :
와이즈 비즈이것은 손으로 직접 만들지 않는 한 변형하려는 객체를 둘러싼 내용이 변경되지 않음을 의미합니다.
객체를 변형 할 때 고려해야 할 유일한 것은 오버 플로우 영역입니다 :
와이즈 비즈자세한 내용은이 jsfiddle을 참조하십시오.
width
를 사용하여이 상황을 객체 오프셋과 비교하는 것이 실제로 좋습니다. -개체를 움직이더라도 (예) 주변 콘텐츠는 변경되지 않습니다.JavaScript를 사용하여이 문제를 처리하려면이 질문을 살펴보십시오.
- 답변 # 3
height
에 백분율 사용 및 컨텐츠를 푸시하기위한 의사 요소를 포함한다. JSFiddle에서 의사 요소를 빨간색으로 표시하여 표시하면 텍스트의 이동을 보정해야하지만 그 방법이 좋습니다.element.getBoundingClientRect
In the HTML namespace, the transform property does not affect the flow of the content surrounding the transformed element.
http://jsfiddle.net/MTyFP/7/
이 솔루션의 작성은 여기에서 찾을 수 있습니다 : http://kizu.ru/en/fun/rotated-text/
- 답변 # 4
G-Cyr의 의견에 따르면,
(...) the extent of the overflow area takes into account transformed elements. This behavior issimilar towhat happens when elements are offset viarelative positioning.
position: relative
padding
- 답변 # 5
다른 답변에서 업데이트 된 버전을 참조하십시오. 이 답변은 더 이상 유효하지 않으며 더 이상 작동하지 않습니다. 역사적인 이유로 여기에 남겨 두겠습니다.
<시간>이 질문은 꽤 오래되었지만 현재
.statusColumn { position: relative; border: 1px solid #ccc; padding: 2px; margin: 2px; width: 200px; } .statusColumn i, .statusColumn b, .statusColumn em, .statusColumn strong { writing-mode: tb-rl; white-space: nowrap; display: inline-block; overflow: visible; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform: rotate(-90deg); /* also accepts left, right, top, bottom coordinates; not required, but a good idea for styling */ -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; /* Should be unset in IE9+ I think. */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); } .statusColumn b:before{ content:''; padding:50% 0; display:block; background:red; position:relative; top:20px }
를 지원합니다. 객체와 그<div class="container"> <div class="statusColumn"><span>Normal</span></div> <div class="statusColumn"><a>Normal</a></div> <div class="statusColumn"><b>Rotated</b></div> <div class="statusColumn"><abbr>Normal</abbr></div> </div>
그리고writing-mode
이 깔끔한 방법을.statusColumn { position: relative; border: 1px solid #ccc; padding: 2px; margin: 2px; width: 200px; } .statusColumn i, .statusColumn b, .statusColumn em, .statusColumn strong { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; display: inline-block; overflow: visible; }
와 함께 사용할 수있는 기능과 결합 된 값 내 솔루션도 언급해야한다고 생각합니다.여기를 참조하십시오. (Chrome 42, FF 33&37에서 테스트되었습니다.)
<div class="container"> <div class="statusColumn"><span>Normal</span></div> <div class="statusColumn"><a>Normal</a></div> <div class="statusColumn"><b>Rotated</b></div> <div class="statusColumn"><abbr>Normal</abbr></div> </div>
요소의 실제상자너비와 높이를 계산합니다. 간단히 말해서 모든 요소를 반복하고 최소 키를 자녀의 실제 상자 높이로 설정할 수 있습니다..getBoundingClientRect()
(몇 가지 수정을 통해 자식을 반복하고 가장 큰 자식을 찾고 부모의 키를 가장 큰 자식으로 설정할 수 있습니다. 그러나 예제를보다 간단하게 만들기로 결정했습니다. 패딩을 추가 할 수도 있습니다. 원하는 경우 부모를 키로 높이거나 관련
width
를 사용할 수 있습니다 CSS의 가치.)하지만
height
를 추가했음을 참고하십시오. 그리고transform
보다 유연하고 정확한 위치 지정을 위해 CSS에 추가하십시오.getBoundingClientRect
$(".statusColumn").each(function() { var $this = $(this), child = $this.children(":first"); $this.css("minHeight", function() { return child[0].getBoundingClientRect().height; }); });
관련 자료
- r - 하위 목록을 제거하고 동일한 목록 아래에 해당 요소를 결합합니다
- Android Studio에서 ID로 요소를 볼 수 없습니다.
- extjs - CSS 클래스별로 여러 Dom 요소 선택
- CSS를 사용하여 HTML 요소를 중심에서 균등하게 간격을 두는 방법
- javascript - 두 부모의 요소 병합 및 삽입
- PHP 다차원 배열에서 부모와 함께 모든 노드 값을 반환
- batch file - JQ를 사용하여 Windows 셸에서 하위 요소의 내용으로 JSON 요소를 필터링합니까?
- java - javafx의 속성으로 요소의 스타일을 변경하는 방법이 있습니까?
- python - 복사 된 목록의 요소 값에 영향을 미치지 않도록 목록에서 일부 요소를 복사하는 방법
- HTML HTML 요소는 div 내부에만 영향을 미칩니다
- sql - 부모가 페이지를 매길 때 자녀를 전시하십시오
- python 3.x - 숫자로 요소를 정렬하는 데 사용하는 현재 루프는 범위를 벗어난 목록 색인을 생성합니다
- java - 스트림을 사용하여 요소를 인덱스에 매핑하는 방법은 무엇입니까?
- excel - 클래스를 사용하여 HTML 요소 값 추출
- java - 요소의 합에 따라 정수 목록을 포함하는 목록을 정렬하는 방법
- algorithm - 합계가 최소가되도록 두 배열에서 요소를 어떻게 선택합니까?
- OpenCv의 폴더에서 여러 이미지 읽기 (python)
- 파이썬 셀레늄 모든 "href"속성 가져 오기
- html - 자바 스크립트 - 클릭 후 변경 버튼 텍스트 변경
- javascript - 현재 URL에서 특정 div 만 새로 고침/새로 고침
- JSP에 대한 클래스를 컴파일 할 수 없습니다
- git commit - 자식 - 로컬 커밋 된 파일에 대한 변경을 취소하는 방법
- jquery - JavaScript로 현재 세션 값을 얻으시겠습니까?
- JavaScript 변수를 HTML div에 '출력'하는 방법
- javascript - swiperjs에서 정지, 재생 버튼 추가
- python - 문자열에서 특정 문자 제거
90도 회전한다고 가정하면 텍스트가 아닌 요소의 경우에도 가능하지만 CSS의 많은 흥미로운 것들과 마찬가지로 약간 교활한 작업이 필요합니다. 내 솔루션은 CSS 2 사양에 따라 기술적으로 정의되지 않은 동작을 호출하므로 Chrome, Firefox, Safari 및 Edge에서 작동하는지 테스트하고 확인했지만 앞으로는 중단되지 않을 것이라고 약속 할 수 없습니다. 브라우저 출시.
빠른 답변.element-to-rotate
를 회전시키려는 HTML을 이와 같이 제공 ...... 회전하려는 요소 주위에2래퍼 요소 소개 :
... 그리고 다음 CSS를 사용하여 시계 반대 방향으로 회전하십시오 (또는 주석 처리 된
스택 스 니펫 데모transform
참조). 시계 방향으로 바꾸는 방법) :위에서 사용했던 주문에 대한 혼란은 합리적이다. 많은 일이 진행되고 있으며 전반적인 전략은 간단하지 않으며 이해하기 위해 CSS 퀴즈에 대한 지식이 필요합니다. 단계별로 살펴 보겠습니다.
우리가 직면 한 문제의 핵심은
<올>transform
를 사용하여 요소에 변환이 적용된다는 것입니다. CSS 속성은 모두 레이아웃이 이루어진 후에 발생합니다. 즉,transform
사용 요소의 부모 나 다른 요소의 크기 나 위치에는 전혀 영향을 미치지 않습니다. 어떻게transform
의이 사실을 바꿀 수있는 방법은 절대 없습니다 공장. 따라서 요소를 회전시키는 효과를 만들고 부모의 높이가 회전을 존중하게하려면 다음을 수행해야합니다.어떻게 높이가
.element-to-rotate
의 너비와 동일한other요소를 구성하는 경우.element-to-rotate
에 우리의 변환을 씁니다 1 단계의 요소에 정확하게 오버레이하는 등의 작업을 수행해야합니다.1 단계의 요소는
.rotation-wrapper-outer
. 그러나 어떻게높이를.element-to-rotate
와 동일하게 만들 수 있습니까? 폭?이 전략의 핵심 요소는
<올>padding: 50% 0
입니다..rotation-wrapper-inner
에서 . 이 익스플로잇은padding
사양의 편심적인 세부 사항입니다. :padding-top
의 경우에도 패딩 비율 그리고padding-bottom
요소 컨테이너 너비의 백분율로 정의됩니다. 이를 통해 다음 2 단계 트릭을 수행 할 수 있습니다.우리는
display: table
를 설정.rotation-wrapper-outer
에서. 이로 인해 너비에 맞게 너비가 줄어들어 너비가 내용물의 고유 너비를 기준으로, 즉.element-to-rotate
의 고유 너비를 기반으로 설정됩니다. . (지원 브라우저에서width: max-content
를 사용하여이를보다 깨끗하게 달성 할 수 있습니다 , 그러나 2017 년 12 월 기준,max-content
여전히 Edge에서 지원되지 않습니다.)우리는
다음으로, 남아있는 것은 자식 요소의 실제 회전 및 위치 지정을 수행하는 것입니다. 당연히height
를 설정 와이즈 비츠 0으로 설정 한 다음 패딩을.rotation-wrapper-inner
로 설정하십시오. (즉, 상단 50 % 및 하단 50 %). 이것은 부모의 너비의 100 %에 해당하는 수직 공간을 차지하게합니다 .1 단계의 트릭을 통해50% 0
의 너비와 같습니다 ..element-to-rotate
회전합니까? 우리는transform: rotate(-90deg)
를 사용합니다 회전 된 요소의 왼쪽 상단 모서리에서 회전이 발생하도록하여 회전 된 요소가 그려진 요소 바로 위를 떠나기 때문에 추후 번역을 쉽게 추론 할 수 있습니다. 그런 다음transform-origin: top left;
를 사용할 수 있습니다 사전 회전 너비와 같은 거리만큼 요소를 아래쪽으로 드래그합니다.우리는 여전히
translate(-100%)
에서 50 % 상단 패딩을 상쇄해야하기 때문에 위치를 올바르게 잡지 못합니다. . 우리는.rotation-wrapper-outer
를 보장함으로써 그것을 달성 와이즈 비즈 (여백이 제대로 작동하도록) -50 %.element-to-rotate
적용 -백분율 여백은 부모 요소의 너비를 기준으로또한정의됩니다.그게 다야!
이것이 왜 완전 규격을 준수하지 않습니까?사양 (볼딩 광산)의 퍼센트 패딩 및 여백 정의에서 다음 참고 사항으로 인해 :
와이즈 비즈 내부 래퍼 요소의 패딩을 컨테이너 너비와 관련하여 자식 너비에 의존하게 만드는 전체 트릭이 바뀌 었 으므로이 조건에 부딪 히고 정의되지 않은 동작이 발생합니다.display: block
변경과 같이 내가 시도한 접근 방식을 수정하는 것처럼 보이는 스펙 호환 조정과 달리 현재 4 개의 주요 브라우저 모두에서 작동합니다.margin-top
의 형제가되기 위해 부모 대신에.