2012-05-25 4 views
-1

960 GS를 사용하여 다음 CSS 레이아웃을 달성하려고합니다. 꽤 많은 신문 기사 종류의 레이아웃. 위치 지정에 문제가 있습니다.CSS 레이아웃 문제 960 GS

나는 당신의 친절한 정보

$ninesixty-grid-width: 978px; 
    $ninesixty-columns:12; 
    $ninesixty-gutter-width: 0px; 
    $ninesixty-class-separator: "-"; 

나는 텍스트 내부의 이미지와 레이아웃의 신문 종류를 달성 할 수없는 위해 사용하고 있습니다. 이를 달성하기 위해 몇 가지 링크 또는 포인터 또는 코드를 안내해주십시오. 당신이 학습과 정보가 필요하면 알려주세요

CSS Image Layout

답변

2

이미 그리드를했다거나하지 않으면 당신은 어쨌든 당신이 가면 말도하지 않았다 - 설정 grid generator site를 입력 :

enter image description here

enter image description here :

는 첫째로 나는 레이아웃에 대한 귀하의 div의에 다음과 같은 클래스를 사용하는 것 container-12에 전체 페이지를 포장

참고 :

나는 당신이 부동의 문제를 방지하기 위해 첫 번째 그리드 6 두 요소를 넣어해야합니다 생각합니다. 고려해야 할 다른 것들은 당신이 시궁창이 없어서 요소들이 서로 꽉 맞을 것이라는 것입니다. 설정을 수정하고 시궁창을 추가 할 것을 제안합니다.

일반적으로 너비를 편집해야하고 그리드 시스템에 맞춰야하므로 그리드 요소에 패딩을 추가하지 않을 것입니다.

+0

Neil 이미지 주셔서 감사합니다. 언급 한대로 그리드의 첫 번째 부분을 디자인했습니다. 그러나 신문 용지 레이아웃을 위해 나는 신문 종류의 레이아웃을 만들기 위해 http://www.monkeydoit.com/wrap-text-images-css.php를 사용했다. – Ravi

+1

그리드와 함께 이미지 주위에 텍스트를 계속 흐르게 할 수는 있지만 어떤 텍스트를 그리드 요소 안에 둘 것인지 결정할 필요가 있습니다. 엄격한 설정을 유지하기 위해 그리드 클래스를 스 캐 폴링으로 생각하십시오. 그리드 너비가 변경되지 않는 한 각 그리드 내부에 두는 것은별로 중요하지 않습니다. – Neil

+0

나는 그것을 아주 많이 찾고 있었기 때문에 당신은 바이올린이 있거나 기사를 가리키고 있는가? 노력에 감사드립니다. Neil – Ravi