이 디자인에 문제가 있습니다. 여기 예 : http://zxc.pp.ua/test/05.htm 또는CSS. 고정 된 위치의 측면 열이있는 3 열 레이아웃
브라우저의 창 폭이 스크롤이 나타납니다, 나는 오른쪽으로 드래그하면, 가운데 열은 왼쪽 열 아래에 간다 미만 1000px (래퍼 크기) 인 경우 http://jsfiddle.net/SkeLLLa/qQRpx/.
어떻게 가운데 요소에 "최소 여백"을 설정할 수 있습니까? 또는 레이아웃을 구현할 다른 방법을 알고 있다면 알려주십시오.
다른 열의 위치가 고정되었으므로 화면에로드되지 않았거나 스크롤되지 않으면 이동하지 않아도 표시되지 않습니다. 고정 위치를 제거하거나 래퍼 크기를 줄입니다.
우선 read this 나는 CSS를 잠깐 동안 사용 해왔다. 그리고 나는 항상 그것을 참조해야한다. 최소 너비는 Try this입니다. 아직도 문제가 있다면 알려주세요. 아마 당신이하는 일을 이해하지 못할 수도 있습니다.
실제로 그래, 젠체하는 첫 번째 링크를 읽고 다시 시작 ... 당신은 세 열 모두 '센터'열에 포함되어 있습니다. 처음부터 쉽게 시작할 수 있습니다. Firebug를 다운로드하거나 Chrome의 개발자 도구를 사용하십시오. 그들은 생명의 은인이 될 것입니다. –
첫 번째 링크를 읽었습니다. 중앙 열에 모두 중첩하면이 문제가 해결되지 않습니다. 최소 폭은 이것에도 영향을 미치지 않습니다. – m03geek
두 가지 옵션이 있습니다.
동일한 효과를 얻으려면 원하는 열 색상으로 배경 이미지를 만들고이 이미지로 래퍼 배경을 설정하여 전체적으로 세 열의 암울을 부여 할 수 있습니다.
래퍼에 세 개의 열을 설정할 수도 있습니다. 래퍼를 오버플로로 설정 : 숨김. 플로팅 된 각 열에 2000px의 아래쪽 패딩과 2000px의 음수 여백을 지정합니다. 그러면 여분의 스크롤을 만들지 않고 열을 래퍼 div의 아래쪽으로 늘릴 수 있습니다.
또한 CSS 3 열 성배를 확인할 수 있습니다 : http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm
우리는 오해가 있을지도 모른다. 나는 horisontal 스크롤에 대해 말했고, 왼쪽 아래에 중앙 컬럼을 숨긴다. 왼쪽 및 오른쪽 열을 늘릴 필요가 없습니다 ... 성배 자습서는 좋지만이 경우는 아닙니다. 나는 2 개의 고정 포스 텐 티드 (fixed-posittioned) 컬럼을 가지고 있으며 중앙 컬럼이 "끝이 없다"(goolge + 뉴스 피드와 같이) 항상 사용자에게 보이도록해야한다. – m03geek
그래서, 당신은이 경우 대신 열 중복에 일이 무엇을 원하는가? –
이 튜토리얼의 내용은 다음과 같습니다. http://buildinternet.com/2009/10/purely-css-faking-minimum-margins/ 또는 css3 선택기 @ 미디어 화면 및 (최대 너비 : 1000px) {} –
m03geek