왼쪽으로 뜨다; vs 디스플레이 : 인라인; vs 디스플레이 : 인라인 블록; vs 디스플레이 : 테이블 셀;

내 질문

1. 전문 웹 디자이너가 선호하는 방법은 무엇입니까?

2. 웹 사이트를 그릴 때 웹 브라우저가 선호하는 방법이 있습니까?

3. 이것은 모두 개인적인 취향입니까?

4. 내가 놓친 다른 기술이 있습니까?

참고 : 위의 질문은 다중 열 레이아웃 디자인과 관련이 있습니다.

왼쪽으로 뜨다;

http://jsfiddle.net/CDe6a/

이것은 열 레이아웃을 만들 때 항상 사용하는 방법이며 제대로 작동하는 것 같습니다. 부모는 스스로 붕괴하기 때문에 clear:both;나중에 기억해야합니다 . 또 다른 죄수 난 그냥 발견 수직 정렬 텍스트 무능력이었다.

디스플레이 : 인라인;

이것은 접는 부모의 문제를 해결하는 것처럼 보이지만 공백을 추가합니다.

http://jsfiddle.net/CDe6a/1/

HTML에서 공백을 제거하는 것이이 문제를 해결하는 가장 쉬운 방법 인 것처럼 보이지만 실제로 HTML에 대해 까다로운 경우 바람직하지 않습니다.

http://jsfiddle.net/CDe6a/2/

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

처럼 동작하는 것 같습니다 display:inline;.

http://jsfiddle.net/CDe6a/3/

디스플레이 : 테이블 셀;

http://jsfiddle.net/CDe6a/4/

완벽하게 작동합니다.

내 생각:

레이아웃을 깨뜨릴 수있는 특정 예외와 같이 많은 것들이 누락되었지만 확실 display:table-cell;하게 작동하는 float:left;것처럼 보이며 항상 엉망이되는 것처럼 교체 를 시작할 것이라고 생각 합니다 clear:both;. 나는 웹에서 이것에 관한 많은 기사와 블로그를 읽었지만 그중 어느 것도 내 웹 사이트를 레이아웃 할 때 사용해야 할 것에 대한 명확한 대답을 제공하지 않습니다.

귀하가 요청한 옵션 중 :

• float:left;
  플로트를 지우려면 추가 마크 업이 필요하기 때문에 플로트를 싫어합니다. 내가 아는 한, 전체 float개념은 CSS 사양에서 제대로 설계되지 않았습니다. 그래도 우리가 할 수있는 일은 없습니다. 그러나 중요한 것은 작동하지만 모든 브라우저 (IE6 / 7에서도)에서 작동하므로 원하는 경우 사용하십시오.

:after선택기를 사용 하여 플로트를 지우 면 지우기에 대한 추가 마크 업이 필요하지 않을 수 있지만 IE6 또는 IE7을 지원하려는 경우 옵션이 아닙니다.

• display:inline;
  IE6 / 7을 제외하고는 레이아웃에 사용해서는 안됩니다 . display:inline; zoom:1에 대한 깨진 지원에 대한 대체 해킹입니다 inline-block.

• display:inline-block;
  이것은 내가 가장 좋아하는 옵션입니다. IE6 / 7에 대한 경고와 함께 일부 요소에 대해 지원하므로 모든 브라우저에서 일관되고 잘 작동합니다. 그러나 해킹 솔루션 이이 문제를 해결하려면 위를 참조하십시오.

또 다른 큰주의 사항 inline-block은 인라인 측면으로 인해 요소 사이의 공백이 텍스트 단어 사이의 공백과 동일하게 처리되므로 요소 사이에 공백이 생길 수 있다는 것입니다. 이에 대한 해결 방법이 있지만 그 중 어느 것도 이상적인 것은 아닙니다. (가장 좋은 것은 단순히 요소 사이에 공백이없는 것입니다)

• display:table-cell;
  브라우저 호환성에 문제가있는 또 다른 곳입니다. 오래된 IE는 전혀 작동하지 않습니다. 그러나 다른 브라우저의 경우에도 와 table-cell같이 스타일이 지정된 요소 내부에있는 컨텍스트에서 사용되도록 설계되었습니다 . 단독으로 사용 하는 것이 의도 된 방법이 아니므로 다른 브라우저에서 다르게 취급하는 것을 경험할 수 있습니다.tabletable-rowtable-cell

당신이 놓친 다른 기술? 예.

• 이것이 다중 열 레이아웃을위한 것이라고 말하면 알고 싶은 CSS 열 기능 이 있습니다. 그러나 가장 잘 지원되는 기능 (IE9에서도 IE에서는 지원되지 않으며 다른 모든 브라우저에서 필요한 공급 업체 접두어)은 아니므로 사용하지 않을 수 있습니다. 그러나 이것은 또 다른 옵션이며 요청했습니다.

• CSS FlexBox 기능도 있습니다.이 기능은 텍스트를 상자마다 흐르게 할 수 있습니다. 복잡한 레이아웃을 허용하는 흥미로운 기능이지만 여전히 개발 단계에 있습니다 . http://html5please.com/#flexbox

희망이 도움이됩니다.

나는 보통 접는 부모 문제 를 해결하기 위해 사용 float: left;하고 추가 overflow: auto;합니다 (이 작동하는 이유에 관해서는 명시적인 높이를 지정하지 않으면 스크롤 막대를 추가하는 대신 부모를 확장합니다 ). 내가 가지고 있던 대부분의 수직 정렬 요구 사항 은 메뉴 막대의 한 줄짜리 텍스트에 대한 것이며, 속성을 사용하여 해결할 수 있습니다 . 블록 요소를 세로로 정렬 해야하는 경우 부모와 세로로 정렬 된 항목, 위치 절대, 상위 50 % 및 음수 여백에 명시 적 높이를 설정합니다.overflow: autooverflow: hiddenline-height

내가 사용하지 않는 이유 display: table-cell는 사이트 너비가 처리 할 수있는 것보다 많은 항목을 가질 때 오버플로되는 방식입니다. 테이블 셀은 사용자가 가로로 스크롤하도록하는 반면, 플로트는 오버플로 메뉴를 래핑하므로 가로로 스크롤 할 필요없이 계속 사용할 수 있습니다.

float : left and overflow : auto의 가장 좋은 점은 해킹없이 IE6까지 다시 작동한다는 것입니다.

나는 그것이 당신이 필요로하는 것에 달려 있다고 말합니다.

1. 3 열 레이아웃을 얻는 데 필요한 경우을 사용하는 것이 좋습니다 float.

2. 메뉴에 필요한 경우을 사용할 수 있습니다 inline-block. 공백 문제의 경우 http://css-tricks.com/fighting-the-space-between-inline-block-elements/에서 Chris Coyier가 설명한 몇 가지 트릭을 사용할 수 있습니다 .

3. 너비가 지정된 상자 안에 골고루 퍼져 야하는 객관식 옵션을 선택해야하는 경우 선호합니다 display: table. 일부 브라우저에서는 제대로 작동하지 않으므로 브라우저 지원에 따라 다릅니다.

마지막으로 가장 좋은 방법은을 사용하는 것 flexbox입니다. 이것에 대한 사양은 몇 번 바뀌 었으므로 아직 안정적이지 않습니다. 그러나 일단 완성되면 이것이 내가 생각하는 가장 좋은 방법이 될 것입니다.

float도 유용하지만 인라인 블록을 선호합니다. 표 셀은 오래된 IE에서 올바르게 렌더링되지 않습니다 (인라인 차단 기능은 아니지만 zoom: 1; *display: inline자주 사용 하는 해킹이 있습니다). 부모보다 키가 작은 아이들이 있다면 수레가 맨 위로 올라가고 인라인 블록이 때로는 망칠 수 있습니다.

대부분의 경우 브라우저는 IE가 아닌 한 모든 것을 올바르게 해석합니다. IE가 테이블 셀 개념과 같이 빨리 지 않는지 항상 확인해야합니다.

사실, 그것은 개인적 취향으로 요약됩니다.

공백을 제거하는 데 사용할 수있는 기술 중 하나 font-size는 부모에게 0을 설정 한 다음 font-size번거롭고 거칠지 만 자녀 에게 돌려 주는 것 입니다.

레코드에 대해서만 Spudley의 답변에 추가하기 position: absolute위해 열 너비를 알고 있으면 사용할 수 있고 여백이 있습니다.

나에게있어, 방법을 선택할 때 주요 문제는 전체 높이를 채우기 위해 열이 필요한지 여부 (동일한 높이)입니다. 표 셀은 가장 쉬운 방법입니다 (구식 브라우저에별로 신경 쓰지 않는 경우).

나는 선호 inline-block하지만 floatHTML elemenets를 모으는 유용한 방법입니다. 특히 왼쪽과 오른쪽에 붙어 있어야하는 요소가 있고 줄을 적게 쓰면 더 잘 작동하고 인라인 블록은 다른 많은 경우에 잘 작동합니다 .