เนื้อหา
มันเที่ยงคืนแล้วนั่นล่ะ div บนไซต์ของคุณยังคงดูเหมือนกล่องของเล่นของเด็ก องค์ประกอบทั้งหมดยุ่งเหยิงและทุกครั้งที่คุณเล่นด้วย CSS แสดง ทรัพย์สินพวกเขาจัดเรียงตัวเองใหม่เป็นเรื่องไร้สาระที่แตกต่างไปจากเดิมอย่างสิ้นเชิง
ถ้าคุณเป็นเหมือนฉันคุณอาจจะแก้ปัญหานี้ได้โดยการพึมพำใต้ลมหายใจของคุณและก้าวร้าวมากขึ้นกับแป้นพิมพ์ของคุณ และแม้ว่ากลยุทธ์นั้นจะใช้ได้ผลกับฉันมาก่อน แต่ฉันเพิ่งเริ่มหาวิธีที่ดีกว่าในการทำความเข้าใจ แสดง ทรัพย์สิน.
ปรากฎพื้นฐานของ แสดง ง่ายกว่าที่คิดไว้ตอนแรกมาก ในความเป็นจริงพวกเขาใช้หลักการเดียวกันกับการบรรจุกระเป๋าเดินทาง ฉันจะพูดถึง display: block, อินไลน์บล็อก และ อินไลน์. หากคุณเคยจัดกระเป๋าเดินทางอย่างเป็นระเบียบมาก่อนคุณจะเห็นเส้นขนาน หากคุณเป็นคนประเภทที่ฉีกเสื้อผ้าทั้งหมดของคุณในลักษณะจับจดก็มีเพียงฉันเท่านั้นที่สามารถทำเพื่อคุณได้
กระเป๋าเดินทางของเราประกอบด้วยเสื้อผ้าสามประเภท:
- บอบบางเหมือนเสื้อเชิ้ตคอปก
- เสื้อยืดที่สามารถรีดได้
- ถุงเท้าหรือชุดชั้นในที่สามารถยัดเข้าไปในช่องว่างได้
สำหรับการอ้างอิงหากเราสร้างแบบจำลองกระเป๋าเดินทางด้วย HTML มันจะมีลักษณะดังนี้:
div class = 'suitcase'> div class = 'sensitive'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'socks'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> คลาส div = 'เสื้อยืด'> / div> / div>
ของที่บอบบางอยู่ด้านบน
แสดง: บล็อก เป็นค่าเริ่มต้นสำหรับองค์ประกอบ HTML ส่วนใหญ่ นั่นหมายความว่าองค์ประกอบใช้พื้นที่แนวนอนทั้งหมดภายในคอนเทนเนอร์ div. หากอยู่ถัดจากองค์ประกอบพี่น้องอื่น ๆ องค์ประกอบนั้นจะขึ้นบรรทัดใหม่และไม่อนุญาตให้มีองค์ประกอบอื่นในบรรทัดนั้น คล้ายกับสิ่งของบอบบางที่คุณวางไว้ที่ด้านบนของกระเป๋าเดินทาง สิ่งเหล่านี้เป็นบทความที่ละเอียดอ่อนหรือชาญฉลาดเช่นเสื้อเชิ้ตมีปก คุณไม่ต้องการให้พวกเขายับดังนั้นคุณต้องแน่ใจว่าพวกเขาไม่ได้ถูกดันไปเบียดกับเสื้อผ้าชิ้นอื่น
สิ่งนี้จะแสดงส่วนที่ยากที่สุดส่วนหนึ่งของไฟล์ display: block. สังเกตว่าเสื้อเชิ้ตที่มีปลอกคอไม่ครอบคลุมความกว้างทั้งหมดของกระเป๋าเดินทางหรือไม่? นั่นไม่ได้หมายความว่ารายการอื่น ๆ จะกระโดดขึ้นไปที่ระดับของมัน สมมติว่าเสื้อตัวนี้มีความกว้าง 60 เปอร์เซ็นต์ของความกว้างกระเป๋าเดินทาง มันจะยังคงปิดกั้นองค์ประกอบอื่น ๆ ไม่ให้เข้าร่วมในระดับบนสุด
นั่นคือสาเหตุที่มีขอบสีส้มในภาพ ก display: block องค์ประกอบจะเพิ่มระยะขอบรอบ ๆ โดยอัตโนมัติหากไม่ใช้พื้นที่แนวนอนทั้งหมด
เสื้อยืดอย่างเรียบร้อย
กระเป๋าเดินทางส่วนใหญ่ของคุณอาจเต็มไปด้วยเสื้อผ้าที่เหลือสำหรับการเดินทางของคุณ เพื่อความเรียบง่ายเราจะลดขนาดนี้ลงเหลือแค่เสื้อยืด มีการถกเถียงกันอย่างมากบนอินเทอร์เน็ตว่าการพับหรือการม้วนนั้นมีประสิทธิภาพมากกว่ากัน ฉันเป็นคนชอบพับ
อย่างไรก็ตามเพื่อให้พอดีกับไอเท็มมากที่สุดคุณควรจัดเรียงเสื้อยืดของคุณเคียงข้างกัน นี่คือสิ่งที่ว่า display: inline-block มีไว้สำหรับ องค์ประกอบเหล่านี้สามารถนั่งติดกันในบรรทัดเดียวกันและถัดจาก จอแสดงผล: แบบอินไลน์ องค์ประกอบ
ไม่เหมือน จอแสดงผล: แบบอินไลน์ องค์ประกอบ, อินไลน์บล็อก องค์ประกอบจะย้ายไปยังบรรทัดถัดไปหากไม่พอดีกับที่มี div ควบคู่ไปกับอื่น ๆ อินไลน์บล็อก องค์ประกอบ หากต้องการให้เสื้อยืดหกใส่แถวถัดไปคุณจะต้องผ่าครึ่งแล้วใช้อีกครึ่งหนึ่งเพื่อเริ่มแถวใหม่ บล็อกอินไลน์ ไม่อนุญาตให้แบ่งครึ่งองค์ประกอบหากไม่พอดีกับเส้น
ถุงเท้าที่เติมเต็มช่องว่าง
กลับมาตรวจสอบ HTML ดั้งเดิมแล้วคุณจะทราบว่ามีถุงเท้า 1 ชิ้น div> ระหว่างเสื้อยืดแปดตัว แต่ลองดูมุมมองแนวนอนของกระเป๋าเดินทางทางด้านขวา ถ้ามีถุงเท้าหนึ่งอัน div>มันจะจบแถวกลางและเริ่มแถวล่างได้อย่างไร? นี่คือจุดประสงค์ของ จอแสดงผล: แบบอินไลน์!
อัน อินไลน์ องค์ประกอบจะล้นไปยังบรรทัดถัดไปหากเกินความกว้างของไฟล์ div (ด้วยวิธีนี้จะแตกต่างจาก อินไลน์บล็อก หรือ บล็อก). ตั้งแต่ถุงเท้าของเรา div เต็มไปด้วยถุงเท้าที่ยัดเข้าไปในช่องว่างโดยบังเอิญมันสามารถเริ่มเติมช่องว่างทางด้านขวาของแถวกลางได้อย่างง่ายดายและล้นออกมาเพื่อเริ่มแถวล่าง
ไม่ต้องตัดถุงเท้าออกครึ่งหนึ่งเพื่อให้สิ่งนี้เกิดขึ้น นี่คือเหตุผลที่พวกเขาสามารถกลายเป็น อินไลน์ในขณะที่เสื้อยืดสามารถทำได้เท่านั้น อินไลน์บล็อก. หากเสื้อยืดแถวกลางรับความกว้างเพียง 60 เปอร์เซ็นต์ของความกว้างถุงเท้า div> จะเลื่อนขึ้นเพื่อเติมเต็มช่องว่างในส่วนที่เหลือของแถว
เดินทางปลอดภัย
นี่คือ CSS สุดท้ายสำหรับกระเป๋าเดินทางของเรา:
.delicate {display: block; ความกว้าง: 60%; } .tshirt {display: inline-block; ความกว้าง: 20%; } .socks {display: inline; }
ต่อไปนี้เป็นสถานการณ์ทางเลือกสองสามสถานการณ์เพื่อแสดงให้เห็นถึงการใช้จอแสดงผลที่แตกต่างกัน หากมีอาหารอันโอชะอยู่ด้านบน display: inline-blockพวกเขาจะพอดีกับเสื้อยืด เสื้อยืดบางตัวจะเลื่อนขึ้นไปด้านบนและส่วนที่เหลือจะปรับตาม จะไม่มีกันชนที่สะดวกสบายทางด้านซ้ายและขวาของเสื้อคอปก
ถ้าเสื้อยืดแต่ละตัวมี บล็อกการแสดงผลคุณจะมีเสื้อยืดกองใหญ่ซ้อนทับกันหนึ่งตัวต่อหนึ่งบรรทัด ถ้าถุงเท้ามี display: inline-blockพวกเขาทั้งหมดจะนั่งแถวล่างมากกว่าที่จะไหลไปมาระหว่างสองแถว เสื้อยืดบางตัวจะถูกดันไปที่แถวอื่นกลายเป็นเส้นที่สี่ จะมีช่องว่างทางขวาของแถวกลางของเสื้อยืด
ด้วยวิธีการที่ฉันได้อธิบายไว้ที่นี่เราจึงได้กระเป๋าเดินทางที่บรรจุอย่างเรียบร้อยซึ่งใช้ประโยชน์จากพื้นที่ที่มีอยู่ให้เกิดประโยชน์สูงสุด
บทความนี้เคยปรากฏใน นิตยสารสุทธิ ฉบับ 289; ซื้อได้ที่นี่!
