inline-block ราคา
มันมีความเป็นไปได้เป็นเวลานานในการสร้างตารางของกล่องที่เติมความกว้างของเบราว์เซอร์และตัดอย่าง (เมื่อเบราว์เซอร์ที่ถูกปรับขนาด) โดยใช้ที่ float คุณสมบัติ
อย่างไรก็ตาม inline-block ค่าของ display คุณสมบัตินี้จะทำให้ง่ายยิ่งขึ้น
inline-block องค์ประกอบเป็นเหมือนองค์ประกอบแบบอินไลน์ แต่พวกเขาสามารถมีความกว้างและความสูง
ตัวอย่าง
วิธีการแบบเก่า - ใช้ float (สังเกตเห็นว่าเรายังต้องระบุ clear อสังหาริมทรัพย์สำหรับองค์ประกอบหลังจากที่กล่องลอย):
ตัวอย่าง
.floating-box {
float: left;
width: 150px;
height: 75px;
margin: 10px;
border: 3px solid #73AD21;
}
.after-box {
clear: left;
} ลองตัวเอง» ผลเดียวกันสามารถทำได้โดยใช้ inline-block ค่าของ display อสังหาริมทรัพย์ (สังเกตเห็นว่าไม่มี clear คุณสมบัติเป็นสิ่งจำเป็น):
ตัวอย่าง
.floating-box {
display: inline-block;
width: 150px;
height: 75px;
margin: 10px;
border: 3px solid #73AD21;
} ลองตัวเอง»