2014-05-12 4 views
-1

저는 회사 로고가 왼쪽에 떠 있었고, 회사 명과 오른쪽에 설명이 들어있는 디렉토리 페이지를 만들고 있습니다. PHP/MySQL로 동적으로 생성 된 약 150 가지가 있습니다. 나는 최근에 사이트 전체를 반응이없는 디렉토리 페이지에서 제외 시켰습니다. 지금은 완벽하게 작동하는 디렉토리에 테이블을 사용하고 있습니다. 목록의 설명 중 많은 부분이 길이 (따라서 높이)가 다르며 표를 사용하면 로고가 내용과 관련하여 완벽하게 유지됩니다.반응 형 디렉토리 페이지 - 테이블 대 Divs?

이 페이지의 응답 속도를 높이기 위해 테이블을 제거하고 디렉토리 목록에 div 만 사용하려고했습니다. 이것은 지옥되었습니다. 포함하는 div에 가변 높이를 중심으로 이미지를 수직으로 가져 오는 것은 불가능합니다.

내 데이터가 본질적으로 "표"이므로이 경우 테이블을 사용하는 것이 좋지 않다고 느낍니다. 이것을 가정하는 것이 잘못 되었습니까? 아니라면 어떻게해야 목록 테이블을 반응 적으로 만들 수 있습니까? HTML을 변경하지 않고도 (테이블이 아닌 div 스타일 레이아웃으로) 그렇게 할 수 있다는 것을 내게 생각하기가 어렵다. 어떤 도움이라도 대단히 감사 할 것입니다.

+0

가능한 복제본 [HTML 레이아웃 용 테이블을 사용하지 않는 이유는 무엇입니까?] (http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html) – apaul

답변

2

divs를 테이블처럼 행동하게 만들 수 있습니다. 전자 메일 폭발을 코드화하라는 메시지가 표시되지 않는 한 테이블 전체에서 벗어나는 경향이 있습니다. 중, 즉 : 그들은 수직 수직의-정렬로 정렬 할 수 있습니다 :만큼 이미지가 (블록 당신이 디스플레이로 그들을 언급하지 않은) 인라인 요소가 남아

display:table; 
display:table-cell; 
vertical-align:middle; 
+0

가능한 경우, 현대의 브라우저에서 테이블은 div처럼 동작합니다. 데이터가 테이블 형식 인 경우 테이블 *을 사용해야합니다. 데이터를 선형으로 표시하려는 경우에도 사용해야합니다. – Alohci

1

:

이 당신의 친구가 될 것입니다 너의 길에서.

APAD1에서 제안한 것처럼 인라인 블록 또는 테이블 셀이라도 래퍼 클래스와 일부 자식 요소가 있다고 가정하면 더 자세한 정보를 제공 할 수 있습니다.

의미 론적으로, 귀하의 데이터는 의미 상으로 imho는 목록 항목이 아닌 표 형식 데이터로 간주되며 가장 좋은 방법은 요소로 표기하는 것입니다.