Làm cách nào để căn chỉnh div lên đầu cha mẹ nhưng vẫn giữ hành vi chặn nội tuyến của nó?

Xem: http://jsfiddle.net/b2BpB/1/

Q: Làm thế nào bạn có thể làm cho box1 và box3 thẳng hàng với đỉnh của div cha 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;
}

Giúp nhiều đánh giá cao ...

Lời cảm ơn: Câu hỏi này được phân tách từ một câu trả lời được đưa ra trước đây bởi https://stackoverflow.com/users/20578/paul-d-waite : Lấy phần tử CSS để tự động thay đổi kích thước theo chiều rộng nội dung, đồng thời được đặt ở giữa

Hãy thử thuộc tính vertical-alignCSS.

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

Áp dụng nó cho #box3quá.

Như những người khác đã nói, vertical-align: toplà bạn của bạn.

Như một phần thưởng ở đây là một fiddle rẽ nhánh với các cải tiến bổ sung giúp nó hoạt động trong Internet Explorer 6 và Internet Explorer 7;)

Ví dụ: ở đây

Sử dụng dọc-align: top; cho phần tử bạn muốn ở trên cùng, như tôi đã trình bày trên jsfiddle của bạn.

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

Bạn có thể thêm float: left; cho mỗi hộp (hộp1, hộp2, hộp3).

http://jsfiddle.net/Wa4ma/

Hoặc bạn chỉ có thể thêm một số nội dung vào div và sử dụng bảng nội tuyến