텍스트 및 그래픽이있는 제목 영역을 갖기 위해 div 스타일을 지정하려고합니다. svg 요소를 추가하면 span 요소의 위치가 더 이상 지정되지 않습니다. 나는 상단에 그것을 덧붙이 기 위해 상대적으로 span을 위치시킨다.div에서 span의 CSS 위치 지정에 당황한
http://jsfiddle.net/fZTm7/3/가 난 그냥 SVG 사각형으로 대체 바와 처음처럼 보이도록 두 번째 DIV 예상 : 여기
은 JS-바이올린입니다.또한 svg 요소의 높이를 줄이면 예상 위치에서 스팬의 변위량이 더 작아지는 것을 볼 수 있습니다. 이것은 완전히 당혹 스럽다. 크롬과 파이어 폭스에서 같은 동작을 보았 기 때문에 깨져있는 CSS 규칙이 있다고 확신합니다.
누구든지 설명 할 수 있습니까?
스팬과 svg 모두에 float: left을 사용하십시오. 참조 : http://jsfiddle.net/fZTm7/10/
원하는 효과를 얻기 위해 .panel-hdg 클래스에 vertical-align: top;을 추가 할 수 있습니다.
SVG 태그에 float: left 속성을 추가하면 정렬 문제가 해결됩니다. .panel-hdg 클래스를 추가 할 필요는 없습니다.
svg{float: left;}
데모 : 그것은 요소 나란히에 정렬하는 동안 요소가 FLOAT 속성을 사용하기 위해 엄지 손가락의 규칙은 다음과 같습니다 이제 다시 @Logan Serman의 대답에 귀하의 코멘트에 http://jsfiddle.net/fZTm7/27
서로.
귀하의 경우에는 SPAN 및 SVG 태그가 있습니다. SPAN은 INLINE 요소이며 SVG가 물리적으로 어떻게 작동하는지 (INLINE/BLOCK)는 지정되지 않았습니다. 플로팅이 여기에서 고칠 수있는 유일한 속성입니다.
콘텐츠를 플로팅하면 올바르게 렌더링되지만 내 질문에는 여전히 답이 없습니다. 왜 이상한 배치가 일어나고 있는지 아십니까? – PhilM
span은 기본적으로 인라인 요소이며 상자 자체의 기준선과 정렬됩니다. – dmc