인라인 블록 동작을 유지하면서 div를 상위에 정렬하는 방법은 무엇입니까?

인라인 블록 동작을 유지하면서 div를 상위에 정렬하는 방법은 무엇입니까?

참조: http://jsfiddle.net/b2BpB/1/

Q: box1과 box3을 상위 div의 상단에 정렬하려면 어떻게 해야 합니까?boxContainer?

#boxContainerContainer {
  background: #fdd;
  text-align: center;
}

#boxContainer {
  display: inline-block;
  border: thick dotted #060;
  margin: 0px auto 10px auto;
  text-align: left;
}

#box1 {
  width: 50px;
  height: 50px;
  background: #999;
  display: inline-block;
}

#box2 {
  width: 50px;
  height: 100px;
  background: #999;
  display: inline-block;
}

#box3 {
  width: 50px;
  height: 50px;
  background: #999;
  display: inline-block;
}

도움을 주셔서 대단히 감사합니다...

승인:이 질문은 https://stackoverflow.com/users/20578/paul-d-waite 에서 이전에 제시한 답변에서 나온 것입니다: 콘텐츠 너비에 맞게 자동으로 크기를 조정하는 동시에 중앙에 위치하도록 CSS 요소 가져오기

CSS 속성을 사용해 보십시오.

#box1 {
    width: 50px;
    height: 50px;
    background: #999;
    display: inline-block;
    vertical-align: top; /* here */
}

적용 대상#box3너무.

다른 사람들이 말했듯이,vertical-align: top당신의 친구입니다.

보너스로 Internet Explorer 6 및 Internet Explorer 7에서도 작동할 수 있도록 향상된 기능이 추가된 포크 피들이 있습니다. ;)

예: 여기

각 상자(상자 1, 상자 2, 상자 3)에 대해 왼쪽에 플로트를 추가할 수 있습니다.

http://jsfiddle.net/Wa4ma/

jsfiddle에서 설명한 것처럼 상단에 원하는 요소에 대해 vertical-align:top을 사용합니다.

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

아니면 div에 컨텐츠를 추가하고 인라인 테이블을 사용할 수도 있습니다.

언급URL : https://stackoverflow.com/questions/5686276/how-to-align-a-div-to-the-top-of-its-parent-but-keeping-its-inline-block-behavio