CSS에서 display : inline-block vs float : left 사용의 장점

CSS에서 display : inline-block vs float : left 사용의 장점

---

일반적으로 여러 DIVs행을 원할 때는을 사용 float: left하지만 이제는 트릭을 발견했습니다.display:inline-block

여기 링크 예 . 그것은 나에게 display:inline-block더 나은 방법 인 것처럼 보이지만 align DIVs단점이 있습니까? 이 방법이 왜 float트릭 보다 덜 인기가 있습니까?

---

3 단어로 말하면 inline-block좋습니다.

인라인 블록

이 display: inline-block접근 방식 의 유일한 단점 은 IE7 이하에서 요소 inline-block가 이미 inline기본적으로 설정된 경우 에만 요소를 표시 할 수 있다는 것 입니다. 이것이 의미하는 것은 <div>요소를 사용하는 대신 요소를 사용해야한다는 것 <span>입니다. 의미 적으로 a <div>는 페이지를 나누기위한 것이고 a <span>는 페이지 범위를 덮기위한 것이므로 의미 론적 차이는 크지 않기 때문에 실제로 큰 단점은 아닙니다. 의 큰 장점은 display:inline-block다른 개발자가 나중에에서 코드를 유지하는 경우, 그것은 훨씬 더 많은 것을 분명하다는 것이다 display:inline-block과 text-align:right(A)보다 달성하기 위해 노력하고있다 float:left거나 float:right문. 의 나의 마음에 드는 혜택 inline-block방법은 사용하기 쉬운 것입니다 vertical-align: middle, line-height그리고text-align: center직관적 인 방식으로 요소를 완벽하게 중앙에 배치합니다. Mozilla 블로그 에서 브라우저 간 인라인 블록을 구현하는 방법에 대한 훌륭한 블로그 게시물을 찾았습니다 . 브라우저 호환성 은 다음과 같습니다 .

흙손

이 float방법 을 사용하는 것이 페이지의 레이아웃에 적합하지 않은 이유는 floatCSS 속성 이 원래 이미지 주위에 텍스트를 감싸기위한 것 (잡지 스타일) 으로 설계 되었기 때문에 설계 상 일반적인 페이지 레이아웃 목적에 가장 적합하지 않기 때문입니다. 플로팅 된 요소를 나중에 변경하는 경우 때때로 페이지 플로우에 없기 때문에 위치 지정 문제가 발생할 수 있습니다 . 다른 단점은 일반적으로 명확한 수정이 필요하며 그렇지 않으면 페이지의 측면을 손상시킬 수 있다는 것입니다. clearfix는 플로팅 요소 뒤에 요소를 추가하여 부모가 요소 와 접히는 것을 막아 콘텐츠와 스타일을 구분하는 의미 론적 선을 넘어 웹 개발의 반 패턴입니다 .

위의 링크에서 언급 된 모든 공백 문제는 white-spaceCSS 속성으로 쉽게 해결할 수 있습니다 .

편집하다:

SitePoint 는 웹 디자인 조언을위한 매우 믿을만한 소스이며 내가하는 것과 같은 의견을 갖고있는 것 같습니다.

CSS 레이아웃을 처음 사용하는 경우 CSS 플로트를 상상의 방식으로 사용하는 것이 기술의 최고라고 생각하면 용서받을 수 있습니다. 당신이 찾을 수있는만큼 많은 CSS 레이아웃 튜토리얼을 소비했다면, 수레를 마스터하는 것이 통과의 예라고 가정 할 수 있습니다. 당신은 복잡성에 놀라서 독창성에 현혹 될 것이며, 수레가 어떻게 작동하는지 마침내 이해하면 성취감을 얻게 될 것입니다.

속지 마십시오. 당신은 세뇌되고 있습니다.

http://www.sitepoint.com/give-floats-the-flick-in-css-layouts/

2015 업데이트-Flexbox는 최신 브라우저를 위한 좋은 대안입니다 .

.container {
  display: flex; /* or inline-flex */
}

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

더 많은 정보

2016 년 12 월 21 일 업데이트

부트 스트랩 4는 IE9에 대한 지원을 제거하므로 행에서 부동 소수점을 제거하고 Flexbox를 완전히 사용합니다.

풀 요청 # 21389

---

나는 일반적 inline-block으로 더 낫다는 것에 동의하지만 , 백분율 너비 를 사용하여 반응 형 그리드를 만들거나 픽셀 완벽한 너비를 원할 경우 고려해야 할 것이 하나 더 있습니다 .

inline-block너비가 100 % 또는 거의 100 %에 이르는 격자에 사용 하는 경우 HTML 마크 업 에 열 사이에 공백이 없는지 확인해야합니다 .

부동 소수점을 사용하면 걱정할 필요가 없습니다. 열은 공백 또는 열 사이의 다른 내용 위에 떠 있습니다. 이 질문에 대한 답변에는 코드를 못 생기게하지 않고 HTML 공백을 제거하는 방법에 대한 유용한 팁이 있습니다 .

어떤 이유로 HTML 마크 업 (예 : 제한 CMS)을 제어 할 수없는 경우 여기에 설명 된 트릭을 시도하거나 인라인 블록 대신 플로트를 사용하고 손상시켜야 할 수 있습니다. font-size:0;열 컨테이너 에서와 같이 극단적 인 상황에서만 사용해야하는 추악한 CSS 트릭도 있습니다 . 각 열에 글꼴 크기를 다시 적용하십시오 .

예를 들면 다음과 같습니다.

• 너비가 33.3 % 인 3 열 그리드입니다float: left . 그것은 "그냥 작동합니다"(래퍼를 제거해야합니다).
• 와 동일한 그리드가inline-block 있습니다. 블록 사이의 공백은 고정 너비 공간을 만들어 총 너비를 100 % 이상으로 밀어 레이아웃을 깨뜨리고 마지막 열이 선을 드롭 다운하게합니다.
• 다음 inline-block은 HTML의 열 사이에 공백 이 있고없는 그리드 입니다. "다시 작동"하지만 HTML이 더 어려워 CMS에서 HTML 출력에 일종의 미리 설정 또는 들여 쓰기를 강제로 적용하여 현실적으로 달성하기가 어려울 수 있습니다.

---

div픽셀을 정확하게 정렬 하려면 float를 사용하십시오. inline-block항상 최소한 몇 픽셀을 잘라야하는 것 같습니다 (적어도 IE에서는)

---

자세한 답변은 여기를 참조하십시오 .

But in general with float you need to be aware and take care of the surrounding elements and inline-block simple way to line elements.

Thanks

---

There is one characteristic about inline-block which may not be straight-forward though. That is that the default value for vertical-align in CSS is baseline. This may cause some unexpected alignment behavior. Look at this article.

http://www.brunildo.org/test/inline-block.html

Instead, when you do a float:left, the divs are independent of each other and you can align them using margin easily.

참고URL : https://stackoverflow.com/questions/15172520/advantages-of-using-displayinline-block-vs-floatleft-in-css