ข้อดีของการใช้ display: inline-block vs float: left ใน CSS

โดยปกติเมื่อเราต้องการมีหลายDIVsตัวติดต่อกันเราจะใช้float: leftแต่ตอนนี้ฉันค้นพบเคล็ดลับของdisplay:inline-block

ตัวอย่างเช่นการเชื่อมโยงที่นี่ สำหรับฉันแล้วนั่นdisplay:inline-blockเป็นวิธีที่ดีกว่าalign DIVsในการติดต่อกัน แต่มีข้อบกพร่องหรือไม่? เหตุใดแนวทางนี้จึงเป็นที่นิยมน้อยกว่าfloatเคล็ดลับ?

ใน 3 คำ: inline-blockดีกว่า

บล็อกแบบอินไลน์

ข้อเสียเปรียบเพียงประการเดียวของdisplay: inline-blockวิธีการนี้คือใน IE7 และด้านล่างองค์ประกอบจะสามารถแสดงinline-blockได้ก็ต่อเมื่อเป็นinlineค่าเริ่มต้นแล้ว สิ่งนี้หมายความว่าแทนที่จะใช้<div>องค์ประกอบคุณต้องใช้<span>องค์ประกอบ มันไม่ได้เป็นข้อเสียเปรียบมากนักเนื่องจากความหมาย a <div>มีไว้สำหรับแบ่งหน้าในขณะที่ a ใช้<span>สำหรับการครอบคลุมช่วงของหน้าเท่านั้นดังนั้นจึงไม่มีความแตกต่างทางความหมายมากนัก ประโยชน์อย่างมากdisplay:inline-blockก็คือเมื่อนักพัฒนาซอฟต์แวร์รายอื่นรักษาโค้ดของคุณในเวลาต่อมาจะเห็นได้ชัดเจนว่าอะไรdisplay:inline-blockและtext-align:right กำลังพยายามทำให้สำเร็จมากกว่าคำสั่งfloat:leftหรือfloat:rightคำสั่ง ผลประโยชน์ที่ชื่นชอบของinline-blockวิธีการก็คือว่ามันง่ายต่อการใช้vertical-align: middle, line-heightและtext-align: centerเพื่อให้องค์ประกอบอยู่ตรงกลางอย่างสมบูรณ์แบบในแบบที่ใช้งานง่าย ผมพบว่าการโพสต์บล็อกที่ดีเกี่ยวกับวิธีใช้เบราว์เซอร์แบบอินไลน์บล็อกบนบล็อกของ Mozilla นี่คือความเข้ากันได้เบราว์เซอร์

ลอย

สาเหตุที่การใช้floatวิธีนี้ไม่เหมาะกับการจัดวางหน้าเว็บของคุณเป็นเพราะเดิมทีfloatคุณสมบัติ CSS นั้นมีไว้เพื่อให้มีข้อความล้อมรอบรูปภาพ (รูปแบบนิตยสาร) เท่านั้นและตามการออกแบบแล้วไม่เหมาะที่สุดสำหรับวัตถุประสงค์ในการจัดวางหน้าทั่วไป เมื่อมีการเปลี่ยนแปลงองค์ประกอบลอยต่อมาบางครั้งคุณจะมีการวางตำแหน่งของปัญหาเพราะพวกเขาไม่ได้อยู่ในการไหลของหน้า ข้อเสียอีกประการหนึ่งคือโดยทั่วไปต้องใช้ clearfix มิฉะนั้นอาจทำให้ส่วนต่างๆของหน้าเสียหายได้ clearfix ต้องเพิ่มองค์ประกอบหลังจากองค์ประกอบลอยที่จะหยุดพวกเขาปกครองจากการยุบรอบตัวพวกเขาที่ข้ามเส้นความหมายระหว่างสไตล์การแยกจากเนื้อหาและจึงต่อต้านรูปแบบในการพัฒนาเว็บ

ปัญหาพื้นที่สีขาวที่กล่าวถึงในลิงก์ด้านบนสามารถแก้ไขได้อย่างง่ายดายด้วยwhite-spaceคุณสมบัติ CSS

แก้ไข:

SitePointเป็นแหล่งที่น่าเชื่อถือมากสำหรับคำแนะนำในการออกแบบเว็บไซต์และดูเหมือนว่าพวกเขาจะมีความคิดเห็นเช่นเดียวกันกับฉัน:

หากคุณเพิ่งเริ่มใช้เลย์เอาต์ CSS คุณจะได้รับการอภัยเพราะคิดว่าการใช้ CSS ลอยๆในรูปแบบจินตนาการคือความสูงของทักษะ หากคุณใช้แบบฝึกหัดการจัดวาง CSS มากเท่าที่คุณจะพบได้คุณอาจคิดว่าการลอยตัวแบบเชี่ยวชาญเป็นพิธีการ คุณจะตื่นตาไปกับความเฉลียวฉลาดประหลาดใจกับความซับซ้อนและคุณจะได้รับความสำเร็จเมื่อคุณเข้าใจวิธีการทำงานของโฟลต

อย่าหลงเชื่อ คุณกำลังถูกล้างสมอง

http://www.sitepoint.com/give-floats-the-flick-in-css-layouts/

การอัปเดตปี 2015 - Flexbox เป็นทางเลือกที่ดีสำหรับเบราว์เซอร์สมัยใหม่ :

.container {
  display: flex; /* or inline-flex */
}

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

ข้อมูลเพิ่มเติม

อัปเดตวันที่ 21 ธันวาคม 2559

Bootstrap 4 กำลังลบการสนับสนุนสำหรับ IE9 ดังนั้นจึงเป็นการกำจัดการลอยจากแถวและใช้ Flexbox เต็มรูปแบบ

ดึงคำขอ # 21389

แม้ว่าฉันจะยอมรับว่าโดยทั่วไปแล้วinline-blockจะดีกว่า แต่มีสิ่งพิเศษอีกอย่างที่ต้องคำนึงถึงหากคุณใช้ความกว้างเปอร์เซ็นต์เพื่อสร้างกริดที่ตอบสนอง (หรือหากคุณต้องการความกว้างที่สมบูรณ์แบบของพิกเซล):

หากคุณกำลังใช้inline-blockสำหรับกริดที่กว้างทั้งหมด 100% หรือใกล้ถึง 100% คุณจะต้องให้แน่ใจว่าคุณมาร์กอัป HTML มีไม่มีพื้นที่สีขาวระหว่างคอลัมน์

ด้วยการลอยตัวนี่ไม่ใช่สิ่งที่คุณต้องกังวลเพราะคอลัมน์จะลอยอยู่เหนือช่องว่างหรือเนื้อหาอื่น ๆ ระหว่างคอลัมน์ คำตอบของคำถามนี้มีเคล็ดลับดีๆบางอย่างเกี่ยวกับวิธีที่จะลบ HTML ช่องว่างโดยไม่ทำให้รหัสของคุณน่าเกลียด

หากด้วยเหตุผลใดก็ตามที่คุณไม่สามารถควบคุมมาร์กอัป HTML (เช่น CMS ที่ จำกัด ) คุณสามารถลองใช้กลอุบายที่อธิบายไว้ที่นี่หรือคุณอาจต้องประนีประนอมและใช้การลอยแทนการบล็อกแบบอินไลน์ นอกจากนี้ยังมีเทคนิค CSS ที่น่าเกลียดซึ่งควรใช้ในสถานการณ์ที่รุนแรงเท่านั้นเช่นfont-size:0;ในคอนเทนเนอร์ของคอลัมน์จากนั้นใช้ขนาดตัวอักษรภายในแต่ละคอลัมน์อีกครั้ง

ตัวอย่างเช่น:

• นี่คือตาราง 3 คอลัมน์ที่มีความกว้าง 33.3% พร้อมกับfloat: left . มัน "ใช้งานได้" (แต่สำหรับ Wrapper จำเป็นต้องล้าง)
• นี่คือเส้นตารางเดียวกันกับinline-block . ช่องว่างระหว่างบล็อกจะสร้างช่องว่างที่มีความกว้างคงที่ซึ่งดันความกว้างทั้งหมดเกิน 100% ทำลายเค้าโครงและทำให้คอลัมน์สุดท้ายเลื่อนลงมาในบรรทัด
• นี่เป็นตารางเดียวกันด้วยinline-blockและไม่มีช่องว่างระหว่างคอลัมน์ใน HTML มัน "ใช้งานได้" อีกครั้ง - แต่ HTML นั้นน่าเกลียดกว่าและ CMS ของคุณอาจบังคับให้มีการระบุข้อมูลล่วงหน้าหรือการเยื้องไปยังเอาต์พุต HTML ทำให้ยากที่จะบรรลุในความเป็นจริง

หากคุณต้องการจัดแนวdivพิกเซลให้ถูกต้องให้ใช้ float inline-blockดูเหมือนว่าคุณจะต้องตัดพิกเซลไม่กี่พิกเซล (อย่างน้อยใน IE)

คุณสามารถหาคำตอบในเชิงลึกที่นี่

แต่โดยทั่วไปfloatคุณจำเป็นต้องระวังและดูแลองค์ประกอบโดยรอบและinline-blockวิธีง่ายๆในการจัดเรียงองค์ประกอบ

ขอบคุณ

มีลักษณะเฉพาะอย่างหนึ่งเกี่ยวกับอินไลน์บล็อกซึ่งอาจไม่ตรงไปตรงมา นั่นคือค่าเริ่มต้นสำหรับการจัดแนวตั้งใน CSS เป็นค่าพื้นฐาน ซึ่งอาจทำให้เกิดพฤติกรรมการจัดตำแหน่งที่ไม่คาดคิด ดูบทความนี้

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

แต่เมื่อคุณทำการลอย: ทางซ้าย div จะไม่ขึ้นอยู่กับกันและกันและคุณสามารถจัดแนวโดยใช้ระยะขอบได้อย่างง่ายดาย