요소 대신 내용의 위치 찾기

나는 모든 다른 유형의 스타일을 보여주는 요소 문서를 가지고 있습니다.요소 대신 내용의 위치 찾기

각 요소 위로 마우스를 가져 가면 사용자가 조치 할 수있는 버튼이 표시됩니다. 떠 다니는 이미지를 추가 할 때까지 제대로 작동합니다.

float가 작동하는 방식 때문에 원래 요소는 래퍼의 가장자리에 도달하지만 내용은 플로팅 된 이미지 이후에 시작됩니다.

실제 요소 자체 대신 요소의 내용 위치를 얻는 방법을 찾아야합니다.

내가 말하는 것에 대한 간단한 스크린 샷.

Screen

편집 : 추가 코드 예제 - http://jsfiddle.net/h5P2e/1/embedded/result/은

이 코드 예제는 내가 로컬이 정리 기능의 일부를 가지고 있지 않기 때문에 녹색 버튼이 표시됩니다 내부 인라인 요소에서 경우에 따라 내가 가지고있는 걱정은 녹색 버튼이 단락의 내용 가까이 있어야 할 때 이미지 위에 표시된다는 것입니다.

출처

2014-04-29 LostInQuery

source 당신이 JSFiddle에 문제를 재현 할 때 더 나은 코드를 공유하는 경우, 또는 그것은 도움이 될 것입니다. – LinkinTED

코드를 보지 않고 말하기가 어렵습니다. 여러 마진/패딩이 여기에 나타날 수 있습니다. –

jsfiddle에 대한 링크 추가 - http://jsfiddle.net/h5P2e/1/embedded/result/ – LostInQuery

콘텐츠 영역의 p 및 ul 태그에 overflow:auto을 추가 할 수 있습니다. 그러면 새 block formatting context이 시작되지만 단점도 없습니다. 너무 많은 여백을 사용하거나 위치 지정을 사용하는 자식 요소가있는 경우 스크롤 막대가 나타날 위험이 있으며 부동 소수점은 거의 동일하게 작동하지 않습니다. 이 메서드의 결과는 요소의 가장자리가 이미지로 덮힌 영역 바깥으로 이동한다는 것입니다.

Demo 및

출처

2014-04-29 14:25:55

간단한 CSS 수정 일 때 JS 솔루션을 찾으려고 벽에 머리를 두드리는 중입니다. 그건 내가 생각하지 않은 바보 같은 짓일거야. – LostInQuery

@LostInQuery 문제 없습니다. XD 필자는 방금 블록 형식화 컨텍스트의 새로운 영역에 대해 최근에 배웠고 최근까지도 js 솔루션이되어야 할 것이라고 생각했을 것입니다. 해피 코딩! –

요소 대신 내용의 위치 찾기

답변

관련 문제