수축 포장 된 왼쪽 막대와 유체 메인 패널을 사용하여 디자인을 구현하려고합니다.이 기본 패널을 사용하면 창 너비가 수용 될 수있는만큼 많은 그림을 표시 할 수 있습니다. 수평 스크롤 바입니다.CSS 레이아웃 : 왼쪽 막대가있는 이미지 갤러리
나는 이것을하는 데 막대한 문제가 있습니다. 내가 부유 할 때 : 컨트롤 바를 떠났을 때, 메인 패널의 내용이 그 주위로 흐르기 시작합니다. 메인 패널을 플로팅하면이 문제는 해결되지만 내용이 축소되어 감춰 지므로 이미지가 단일 열에 늘어서는 경향이 있습니다.
이렇게하는 우아한 해결책이 있습니까? http://jsfiddle.net/PYKwg/2/embedded/result/
이 시도 :
내가 여기에 문제의 모형을 만들었 http://jsfiddle.net/CXvRn/10/을이 코드의 모든 것 :
내가 #mainWrapper가장 기본적인 JQuery와 버전은 "#bottom이 .thing"왼쪽 #main의 가로 채우기 및 가로 여백 당신은 jQuery를 사용하여 그것들을 파생시킬 수 있습니다.하지만 그것들을 절대 변경하지 않는다면 당신은 스스로를 설정하고 코드의 일부 라인을 저장할 수도 있습니다. 당신이 JQuery와 함께 할하려는 경우
여기 알아낼 수 있습니다 주요 콘텐츠 섹션에서 "자동 오버 플로우"Padding or margin value in pixels as integer using jQuery
노력에 감사드립니다! 나는 마침내 css-only 해결책을 아래에서 찾아 냈다. – bukzor
솔루션입니다. 이렇게하면 내용이 플로팅 제어 섹션의 아래/밖으로 흐르지 않는 블록 흐름의 새 프레임이 설정됩니다. 참조 : http://www.w3.org/TR/CSS2/visuren.html#block-formatting
여기에 직접보기 : http://jsfiddle.net/PYKwg/3/embedded/result/
(감사 알렉스)
내가 속임수 또는 폭 추측하지 않았다 .. 당신은 고정되어 당신의 요소 세트 폭을 가져야한다 . 당신이 완전히 유체를하지 않는 한 .. 그 경우에는 너비가 왼쪽의 경우 15 %, 오른쪽의 경우 85 %와 같을 것입니다. 너비를 설정하지 않으면 솔루션으로 javaScript를 사용하는 유일한 왼쪽. –
내 컨트롤은 3800 픽셀 너비 디스플레이의 15 %를 차지하지 않습니다 (이중 와이드 스크린은 여기에서 일반적입니다). 비슷하게 마른 화면에서는 15 %만으로는 충분하지 않습니다. 나는 float의 shrink-wrap 동작에 상당히 만족합니다 : left'd div. 문제가되는 것은 디자인의 나머지 부분입니다. – bukzor
콘텐츠가 고정 너비가 아닌 것을 보여주기 위해 모형을 약간 업데이트했습니다. – bukzor