side-by-side 비례 - 넓이 divs에 공백 문제

현재 두 개의 side-by-side div가 있습니다. 각 div는 페이지의 폭으로 설정되어 있으므로 옆으로 스크롤 할 수 있습니다. 오른쪽 div는 정확히 40px를 왼쪽으로 쳐다보아야 페이지로드시 표시됩니다. 그 부분을 잘 처리하기 위해 (많은 도움을 받아) 관리했습니다. 오른쪽 div의 가장자리와 페이지의 가장자리 사이에 40px 갭이 있습니다 (아래 그림 참조).side-by-side 비례 - 넓이 divs에 공백 문제

jsFiddle

제거 방법에 대한 아이디어가 있으십니까? 어떤 도움을 주셔서 감사합니다. 'peek'영역은 정확히 40 픽셀을 유지해야하므로 백분율을 사용하는 것이 문제가됩니다. 아, 그리고 이것이 수직적 인 모습을 보여주는 예를 보려면 example.

환호.

출처

2012-05-18 mattmouth

컨테이너의 너비가 200 %이며 확장 문제를 일으키는 중입니다.

크기를 줄여야합니다. 너비가 %이고 너비 오프셋이 px이기 때문에 조금 어렵습니다.

오프셋을 백분율로 변경하고 컨테이너에서 꺼내십시오. 왼쪽 여백 대신 왼쪽 여백을 사용해야합니다.

이 크롬 관리자에서 나를 위해 작동 :

#wrapper { 
    width: 199%; /* change here */ 
    position: relative; 
} 

#right { 
    float: right; 
    width: 50%; 
    background-color:cyan; 
    position: relative; 
    margin-left: -1%; /* and here */ 
}

바이올린 : http://jsfiddle.net/hUyBq/

* 편집 : * 1 % 예입니다, 당신은 더 많은 것을 할 수 있습니다. 랩퍼 따라

* 편집 업데이트 : * JS 사용 솔루션 : http://jsfiddle.net/bendog/wP4zb/

출처

2012-05-18 00:54:05 Ben

답장을 보내 주셔서 감사합니다. 그래, 비슷한 방법을 사용해 보았지만 창 크기에 따라 '엿보기'영역이 바뀌고 작은 이미지와 텍스트가있을 때 고정 된 상태로 유지하는 것이 훨씬 더 좋습니다. – mattmouth

@mattmouth 좀 도와 주시겠습니까? – Ben

js에 관해서 내가 뭘하는지 잘 모르지만 나는 그것에 대해 완전히 반대하지는 않는다. 솔루션을 찾을 수 있다면 구현하려고 시도 하겠지만. – mattmouth

가짜처럼 만들면 jsFiddle example?

래퍼 외부로 스크롤 오른쪽 블록 (<p>scroll right --></p>)을 옮겼습니다 (거기에 있어야하는지는 언급하지 않았습니다). 그런 다음 래퍼에 같은 색을 적용하고 overflow:auto;을 추가했습니다.

출처

2012-05-18 00:51:05 j08691

그것은 좋은 공백을 제거하는 작업을 수행합니다. 문제는 파란색 영역의 텍스트 ("오른쪽")가 잘리는 문제입니다. 스크롤을 끝내면 파란색 div의 왼쪽 가장자리가 페이지 가장자리에 있도록하고 싶습니다. 어쨌든 고마워. – mattmouth

"right"라는 단어의 일부분이 잘린 것입니까? 나는 당신의보기에도 그것을 봅니다. 그게 무슨 뜻이야, 글꼴을 조정할 수 없습니다? 그렇지 않으면 텍스트가 잘리는 것을 이해하지 못합니다. – j08691

예, 오른쪽의 공백으로 인해 예제에서 발생하고 있습니다. 그것이 사라 졌다면, div는 창과 일치 할 것입니다. 내가 게시 한 두 번째 예제 인 세로 그림을 확인하십시오. 기본적으로 두 번째 div가 이와 같이 작동하기를 원합니다.이 경우 두 텍스트 모두에서 텍스트가 표시됩니다. – mattmouth

side-by-side 비례 - 넓이 divs에 공백 문제

답변

관련 문제