inline-block-1

inline-block

브라우저 너비를 채우고 알맞게 줄바꿈되는 박스 그리드를 만들 수 있는데, 그동안 이러한 박스 그리드를 만드는 방법은 float를 이용하는 것이었습니다. 하지만 이제 inline-block을 이용하면 만들기가 훨씬 더 쉽습니다. inline-block 엘리먼트는 inline 엘리먼트와 비슷하지만 너비와 높이를 지정할 수 있습니다. 두 접근법의 예제를 모두 살펴봅시다.

힘든 방법(float를 이용)

.box {
  float: left;
  width: 200px;
  height: 100px;
  margin: 1em;
}
.after-box {
  clear: left;
}

<div class="box">

저는 지금 떠 있어요!

</div>

<div class="box">

저는 지금 떠 있어요!

</div>

<div class="box">

저는 지금 떠 있어요!

</div>

<div class="box">

저는 지금 떠 있어요!

</div>

<div class="box">

저는 지금 떠 있어요!

</div>

<div class="box">

저는 지금 떠 있어요!

</div>

<div class="box">

저는 지금 떠 있어요!

</div>

<div class="box">

저는 지금 떠 있어요!

</div>

<div class="box">

저는 지금 떠 있어요!

</div>

<div class="box">

저는 지금 떠 있어요!

</div>

<div class="box">

저는 지금 떠 있어요!

</div>

<div class="after-box">

저한테는 clear가 지정돼 있어서 위에 나열된 박스 옆으로 배치되지 않아요.

</div>

쉬운 방법(inline-block을 이용)

display 프로퍼티에 inline-block 값을 이용하면 똑같은 효과를 낼 수 있습니다.

.box2 {
  display: inline-block;
  width: 200px;
  height: 100px;
  margin: 1em;
}

<div class="box2">

저는 인라인 블록입니다!

</div>

<div class="box2">

저는 인라인 블록입니다!

</div>

<div class="box2">

저는 인라인 블록입니다!

</div>

<div class="box2">

저는 인라인 블록입니다!

</div>

<div class="box2">

저는 인라인 블록입니다!

</div>

<div class="box2">

저는 인라인 블록입니다!

</div>

<div class="box2">

저는 인라인 블록입니다!

</div>

<div class="box2">

저는 인라인 블록입니다!

</div>

<div class="box2">

저는 인라인 블록입니다!

</div>

<div class="box2">

저는 인라인 블록입니다!

</div>

<div>

이 경우에는 clear를 쓰지 않아도 됩니다. 멋지네요!

</div>

IE6와 IE7에서 inline-block을 지원하려면 별도의 작업을 더 해야 합니다. 때때로 inline-block이 hasLayout이라고 하는 것을 발생시킨다고 이야기하는 분들도 있지만 기존 브라우저를 지원하려면 그것에 대해서만 알면 됩니다.

출처 http://ko.learnlayout.com/inline-block.html