css Column/Grid-Layout : 위치 또는 부동입니다. 그 대안?

Question

내가 아는 한 멀리 열 레이아웃이나 격자 레이아웃을 만들거나 CSS를 사용하여보다 복잡한 방법으로 요소를 배치 할 수있는 두 가지 방법이 있습니다. 1) 위치 : 절대/상대;

2) float : 왼쪽/오른쪽; clear

어떤 대안이 있습니까? 어떤 기술이 더 좋거나 덜 지원되거나 전혀 중요하지 않습니까? 최선의 브라우저 지원으로 어떤 모범 사례가 있습니까?

말했 또는 공지 대안 :

3) 표시 인라인 블록;

4) 디스플레이 : table-cell;

5) HTML 테이블 (그것은? HTML 테이블과 동일하지 않습니다) (하지만 CSS 또는 의미)

6) CSS3 컬럼 (이하 지원 여부 아니에요?)

Answer 1

당신에게 컬럼에도 인라인 블록 시퀀스를 사용할 수 있다고 생각합니다. 아니면 display: table-cell 일 수도 있습니다. 그것을 성취 할 수있는 수십 가지 방법이 있습니다.

Answer 2

1) 위치 : 절대/상대;

레이아웃의 일부일 수 있지만 반드시 그렇지는 않습니다.

2) float : left/right; 지우기

예, 일반적으로 float가 레이아웃에 사용됩니다.

3) 디스플레이 : 인라인 블록;

페이지 레이아웃에 사용되는 경우가 거의 없으며 지원이 버그가 있습니다 (공백을 구분합니다).

4) 디스플레이 : table-cell; (html 테이블과 동일하지 않습니까?)

아니요, HTML 테이블을 사용하는 것과 같지 않습니다. 표는 마크 업 (내용)에 있으며 display:table-*은 CSS (프레젠테이션)의 일부입니다. 이것은 레이아웃을 다루기에 좋은 방법이지만, 이전 브라우저에 대한 지원은 전적으로 존재하지 않습니다.

5) HTML 테이블 (하지만 CSS를 또는 의미 아니다)

네 말이 맞아, 이것은를 사용하지 않는 테이블이없는 레이아웃 테이블 형식의 데이터를, 마크 업을위한 것입니다.

6) css3 열 (지원이 적거나 없습니까?)

다시 한번 말하지만, 지원은 실제로 존재하지 않으며, 레이아웃 용 텍스트보다 더 중요합니다 (둘 다 사용할 수 있다고하더라도).

최상의 브라우저 지원을위한 모범 사례는 무엇입니까?

당신이 일반 답을 찾고 있다면, 당신은 자신이 구축하고자, 당신은 필요한 경우 단지 상대/절대 위치와 함께, float들 사용 브라우저를 지원하는 우려. 정확히 어떤 브라우저를 지원할 것인지 결정하십시오. 언제나처럼 테스트 레이아웃이 다른 브라우저에서 작동하는지 확인할 수 있습니다. 마술 총알은 없으며 악마는 세부 사항에 있습니다.