div를 부모의 상단에 맞추고 인라인 블록 동작을 유지하는 방법은 무엇입니까? inline-block; border: thick dotted

참조 : 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 요소를 가져와 컨텐츠 너비로 자동 크기 조정 및 동시에 중앙에 위치

답변

vertical-alignCSS 속성을 시도하십시오 .

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

그것을 적용하십시오 #box3.

답변

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

여기에 보너스로 Internet Explorer 6 및 Internet Explorer 7에서도 작동하도록 향상 된 추가 기능이있는 바이올린이 있습니다.)

예 : 여기

답변

수직 정렬을 사용하십시오. jsfiddle에서 설명했듯이 맨 위에 원하는 요소가 있습니다.

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

답변

float : left를 추가 할 수 있습니다. 각 상자 (box1, box2, box3)에 대해

http://jsfiddle.net/Wa4ma/

답변

또는 div에 일부 내용을 추가하고 인라인 테이블을 사용할 수 있습니다

답변