float:left; vs display:loat; vs display:loat-block; vs display:table-cell;

float:left; vs display:loat; vs display:loat-block; vs display:table-cell;

내 질문(들)

1. 전문 웹 디자이너가 선호하는 방법이 있습니까?

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

3. 이게 다 개인적인 취향인가요?

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

참고: 위의 질문은 다중 칼럼 레이아웃 설계와 관련된 것입니다.

---

float:왼쪽;

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;
  저는 플로트를 없애기 위해 마크업을 추가로 해야 하기 때문에 플로트를 싫어합니다.내가 아는 한, 전체적으로floatCSS 사양에서 개념이 제대로 설계되지 않았습니다.지금은 어쩔 수 없죠.하지만 중요한 것은 그것이 잘 작동하고, 모든 브라우저(IE6/7까지)에서 작동한다는 것입니다. 그러니 마음에 드시면 사용하세요.

을 를 은 하지 이 한다면 이 하지 을 은 한다면 를 :afterFloat(플로트)를 지우려면 Selector(선택)를 선택하지만 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이이된부의서록tss다sdeefnagddoe이의이부된stable그리고.table-row; 사용하는table-cell격리는 의도된 방법이 아니므로 브라우저마다 다르게 취급할 수 있습니다.

다른 기술을 놓쳤을 수도 있겠군요?네.

• 다중 열 레이아웃을 위한 것이라고 하므로 알고 싶을 수 있는 CSS 열 기능이 있습니다.그러나 가장 잘 지원되는 기능이 아니기 때문에(IE9에서도 IE에서 지원되지 않으며 다른 모든 브라우저에서 벤더 접두사가 필요함) 사용을 원하지 않을 수도 있습니다.하지만 그건 다른 선택이고, 당신은 물어봤습니다.

• CSS FlexBox 기능도 있는데, 이 기능을 사용하면 텍스트가 상자에서 상자로 이동할 수 있습니다.복잡한 레이아웃을 구현할 수 있는 흥미로운 기능이지만, 이 기능은 여전히 개발 중에 있습니다. http://html5please.com/ #flexbox를 참조하십시오.

합니다를 씁니다.float: left;를 .overflow: auto;(이것이 작동하는 이유에 관해) 붕괴하는 부모 문제를 해결하기 위해,overflow: auto하지 않으면 하는 대신 합니다.적를면롤를는신다를지다를신l는d를e .overflow: hidden작동합니다).내가 가졌던 수직 정렬 요구의 대부분은 메뉴 바의 텍스트 한 줄에 대한 것이고, 이것은 다음을 사용하여 해결할 수 있습니다.line-height를 수직 해야 할 , 및, 절대 및 합니다.블록 요소를 수직 정렬해야 할 경우, 부모 및 수직 정렬 항목에 명시적 높이, 절대 위치, 상위 50% 및 마이너스 마진을 설정합니다.

내가 사용하지 않는 이유display: table-cell사이트의 너비보다 더 많은 항목이 있을 때 오버플로가 발생하는 방식입니다. 테이블 셀은 사용자가 수평으로 스크롤하도록 강제하고 플로트는 오버플로 메뉴를 감싸서 수평 스크롤 없이도 사용할 수 있습니다.

플로트의 가장 좋은 점은 왼쪽과 오버플로입니다. 자동은 해킹 없이 IE6까지 작동한다는 점입니다.

필요한 용도에 따라 다릅니다.

1. 을 얻기 하다면 3열 하다면 는 하는 을 합니다 을 을 의 을 합니다 하는 으로 하는 것을 추천합니다.float.

2. 을 하시면 됩니다.inline-block. 빈 공간 문제의 경우, 여기 http://css-tricks.com/fighting-the-space-between-inline-block-elements/ 에서 Chris Coyier가 설명한 몇 가지 방법을 사용할 수 있습니다.

3. 상자 옵션을 , Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δdisplay: table브라우저에서는 지원 여부에 다릅니다. 이는 일부 브라우저에서는 올바르게 작동하지 않으므로 브라우저 지원 여부에 따라 달라집니다.

은 무엇일까요?flexbox이 몇 번 이것에 대한 스펙이 몇 번 바뀌어서 아직 안정적이지 않습니다.하지만 일단 그것이 완성되면, 이것이 제가 생각하는 최선의 방법이 될 것입니다.

저는 인라인 블록을 선호하지만 플로트도 유용합니다.은 이전블록도 블이에전해다지인만지도게인(만지'see도e지블ny-eetl게 ).zoom: 1; *display: inline자주 사용하는 해킹).만약 부모보다 키가 작은 아이들이 있다면, 플로트는 아이들을 정상으로 올려줄 것이고, 반면에 인라인 블록은 가끔 망가질 것입니다.

대부분의 경우, IE가 아니면 브라우저가 모든 것을 올바르게 해석할 것입니다.IE가 썩지 않도록 항상 확인해야 합니다 예를 들어, 테이블 셀 개념 말이죠.

모든 현실에서, 네, 그것은 개인적인 선호로 귀결됩니다.

할 수 한 은 를 할 은 하기 은 를 font-size을 준 다음에게 0을준음의,음,font-size번거롭고 역겹기는 하지만 아이들에게 돌아갔죠

, 으로만, 의, 할, 를 사용할 .position: absolute열 너비를 알고 있는 경우 여백을 선택됩니다.

방법을 선택할 때 가장 중요한 문제는 테이블 셀이 가장 쉬운 방법인 전체 높이(동일한 높이)를 채우기 위해 열이 필요한지 여부입니다(이전 브라우저를 많이 사용하지 않는 경우).

나는 더좋아요inline-block,그렇지만floatHTML 요소를 조합하는 데 여전히 유용한 방법입니다. 특히 왼쪽에 한 개, 오른쪽에 한 개를 붙여야 하는 요소가 있을 때, 줄을 적게 쓸수록 더 잘 작동하고 다른 많은 경우 인라인 블록이 잘 작동합니다.

언급URL : https://stackoverflow.com/questions/11805352/floatleft-vs-displayinline-vs-displayinline-block-vs-displaytable-cell