div를 사용하여 복잡한 테이블 레이아웃 변환

-1

나는 테이블 레이아웃을 더 현대적인 div 레이아웃으로 마이그레이션하려하지만이를 수행하는 방법을 놓치고 있습니다. 어떤 메신저 다음 레이아웃 작업을 진행하게되는 일을하려고 : D의 내용이 A와 G. 무엇 내가 지금까지 시도 된 것은 AH을 만드는 않습니다 너무 커질 경우div를 사용하여 복잡한 테이블 레이아웃 변환

---------------  ---------- 
    |  A  |  | B | 
    |    |  |  | 
    ---------------  ---------- 
------------------------------------ 
|C |  D  | E | F | 
------------------------------------ 
    ---------------  ---------- 
    |  G  |  | H | 
    |    |  |  | 
    ---------------  ----------

모든 폭입니다 서로에 의존을 div '를 작성한 다음'content '라는 900px 크기의 div에 모두 포함합니다. 그런 다음 위치 : 상대를 사용하고 올바른 결과를 얻으려고 시도하지만 상대 위치 지정을 사용할 때 "내용"이 비례하지 않기 때문에 실패합니다. 이와 같은 레이아웃에 접근하는 방법에 대한 제안 사항은 무엇입니까?

업데이트

: 메신저 이것에는 프로 그것은 당신의 고정 폭 레이아웃을 사용하는 것 같아 http://jsfiddle.net/favetelinguis/5R5nj/3/

출처

2014-06-25 user3748315

실제 코드가있는 게시물을 업데이트했습니다. – user3748315

을 :) 없기 때문에 이 내가 지금까지 가지고있는 코드, 그것은 혼란이다. 사업부 폭에 대한 비율을 사용해보십시오 : 여기

width: 20%;

은 예입니다 http://jsfiddle.net/HHfQY/

그래서 당신은 모든 계산을 할 필요가 없습니다 더 나은 솔루션은 http://www.responsivegridsystem.com/ 같은 반응 그리드 시스템을 사용하는 것입니다 .

출처

2014-06-25 06:51:41 ignacio

니스는 저를 시작 시켰지 만, 제 결과는보고 싶으면 코드 링크로 질문을 업데이트했습니다. – user3748315

문제는 내가 두 번째 행에서 div3-div5를 얻는 방법입니다. 귀하의 예제에서 당신은 두 행을 가지고 있지만 내 코드에서이 행을 시도하면 같은 행에 모든 상자가 나타납니다. div 태그를 행에 레이어하는 방법은 무엇입니까? – user3748315

@ user3748315 플로팅 div를 사용하기 때문에 더 이상 현재 행에 맞지 않으면 자동으로 다음 행으로 이동합니다. 왼쪽과 오른쪽을 지울 수있는 "clear : both;"를 사용하여 새로운 행을 강제 실행할 수 있습니다. 업데이트 된 예제보기 http://jsfiddle.net/5R5nj/2/ – ignacio

div를 사용하여 복잡한 테이블 레이아웃 변환

답변

관련 문제