CSS에서 display : inline-block 대 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가 필요하다는 것입니다. 그렇지 않으면 페이지의 측면이 손상 될 수 있습니다. 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 일 업데이트

Bootstrap 4는 IE9에 대한 지원을 제거하므로 행에서 부동 소수점을 제거하고 전체 Flexbox가됩니다.

Pull 요청 # 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에서는)

여기 에서 자세한 답변을 찾을 수 있습니다 .

그러나 일반적으로 float주변 요소와 inline-block요소를 선으로 지정하는 간단한 방법을 인식하고 관리해야합니다 .

감사

인라인 블록에 대한 한 가지 특성이 있지만 간단하지 않을 수 있습니다. 즉, CSS에서 세로 정렬의 기본값은 기준입니다. 이로 인해 예기치 않은 정렬 동작이 발생할 수 있습니다. 이 기사를보세요.

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

대신 float : left를 수행하면 div가 서로 독립적이며 여백을 사용하여 쉽게 정렬 할 수 있습니다.