วิธีจัดแนว div ให้อยู่ด้านบนสุดของพาเรนต์ แต่ยังคงพฤติกรรมแบบอินไลน์บล็อกอยู่

ดู: http://jsfiddle.net/b2BpB/1/

ถาม: คุณจะทำให้ box1 และ box3 จัดตำแหน่งไปที่ด้านบนของ div parent ได้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-alignคุณสมบัติ 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 ด้วย;)

ตัวอย่าง: ที่นี่

ใช้จัดแนวตั้ง: ด้านบน; สำหรับองค์ประกอบที่คุณต้องการที่ด้านบนตามที่ฉันได้แสดงบน jsfiddle ของคุณ

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

คุณสามารถเพิ่ม float: left; สำหรับแต่ละกล่อง (box1, box2, box3)

http://jsfiddle.net/Wa4ma/

หรือคุณสามารถเพิ่มเนื้อหาบางส่วนลงใน div และใช้อินไลน์ตาราง