ลอย: ด้านซ้าย; vs display: อินไลน์; vs display: inline-block; vs display: table-cell;

คำถามของฉัน

1. เป็นวิธีการใดที่ต้องการโดยนักออกแบบเว็บไซต์มืออาชีพ?

2. มีวิธีการใด ๆ เหล่านี้ที่สร้างขึ้นโดยเว็บเบราว์เซอร์เมื่อวาดเว็บไซต์หรือไม่

3. นี่เป็นเพียงการตั้งค่าส่วนตัวทั้งหมดหรือไม่

4. มีเทคนิคอื่นที่ฉันขาดหายไปไหม

หมายเหตุ: คำถามข้างต้นเกี่ยวข้องกับการออกแบบเค้าโครงหลายคอลัมน์

ลอย: ด้านซ้าย;

http://jsfiddle.net/CDe6a/

นี่เป็นวิธีที่ฉันใช้เสมอเมื่อสร้างเค้าโครงคอลัมน์และดูเหมือนว่าจะใช้ได้ดี แม้ว่าผู้ปกครองจะล่มสลายในตัวเองดังนั้นคุณเพียงแค่ต้องจำไว้ในclear:both;ภายหลัง อีกนักโทษที่ฉันเพิ่งพบคือไม่สามารถที่จะจัดข้อความชิดในแนวตั้ง

แสดง: อินไลน์;

ดูเหมือนว่าจะแก้ไขปัญหาการยุบตัวของแม่ แต่เพิ่มช่องว่าง

http://jsfiddle.net/CDe6a/1/

การลบช่องว่างออกจาก html ดูเหมือนจะเป็นการแก้ไขปัญหาที่ง่ายที่สุด แต่ไม่ต้องการถ้าคุณจู้จี้จุกจิกเกี่ยวกับ html ของคุณ

http://jsfiddle.net/CDe6a/2/

แสดง: อินไลน์บล็อก

ดูเหมือนว่าจะมีพฤติกรรมเหมือนdisplay:inline;กัน

http://jsfiddle.net/CDe6a/3/

แสดง: ตารางเซลล์

http://jsfiddle.net/CDe6a/4/

ทำงานได้สมบูรณ์แบบ

ความคิดของฉัน:

ฉันแน่ใจว่าฉันทำสิ่งต่าง ๆ ขาดหายไปเช่นข้อยกเว้นบางอย่างที่จะทำลายเค้าโครง แต่display:table-cell;ดูเหมือนว่าจะทำงานได้ดีที่สุดและฉันคิดว่าฉันจะเริ่มแทนที่float:left;เมื่อฉันดูเหมือนจะสับสนอยู่clear:both;เสมอ ฉันได้อ่านบทความและบล็อกจำนวนมากเกี่ยวกับเรื่องนี้ในเว็บ แต่ไม่มีใครตอบคำถามที่ชัดเจนเกี่ยวกับสิ่งที่ฉันควรใช้เมื่อจัดวางเว็บไซต์ของฉัน

จากตัวเลือกที่คุณถามเกี่ยวกับ:

• float:left;
  ฉันไม่ชอบลอยเนื่องจากจำเป็นต้องมีมาร์กอัปเพิ่มเติมเพื่อล้างลอย เท่าที่ฉันกังวลfloatแนวคิดทั้งหมดได้รับการออกแบบไม่ดีในรายละเอียด CSS แม้ว่าเราจะไม่สามารถทำอะไรได้ในตอนนี้ แต่สิ่งสำคัญคือมันใช้งานได้และใช้งานได้ในเบราว์เซอร์ทั้งหมด (แม้แต่ IE6 / 7) ดังนั้นให้ใช้ถ้าคุณชอบ

มาร์กอัปเพิ่มเติมสำหรับการล้างอาจไม่จำเป็นถ้าคุณใช้:afterตัวเลือกเพื่อล้างการลอย แต่นี่ไม่ใช่ตัวเลือกถ้าคุณต้องการสนับสนุน IE6 หรือ IE7

• display:inline;
  สิ่งนี้ไม่ควรใช้สำหรับเลย์เอาต์ยกเว้น IE6 / 7 ซึ่งdisplay:inline; zoom:1เป็นแฮ็คแบบหล่นกลับสำหรับการสนับสนุนที่inline-blockเสียหาย

• display:inline-block;
  นี่คือตัวเลือกที่ฉันชอบ มันทำงานได้ดีและต่อเนื่องในทุกเบราว์เซอร์โดยมีข้อแม้สำหรับ IE6 / 7 ซึ่งรองรับบางองค์ประกอบ แต่ดูวิธีแก้ปัญหาแฮ็คข้างต้นนี้

Caveat ขนาดใหญ่อีกอันที่มีinline-blockเนื่องจากด้านอินไลน์ช่องว่างระหว่างองค์ประกอบจะได้รับการปฏิบัติเช่นเดียวกับช่องว่างสีขาวระหว่างคำของข้อความเพื่อให้คุณสามารถรับช่องว่างที่ปรากฏระหว่างองค์ประกอบ มีวิธีแก้ไขปัญหานี้อยู่บ้าง แต่ไม่มีวิธีใดที่เหมาะ (สิ่งที่ดีที่สุดคือไม่มีช่องว่างระหว่างองค์ประกอบ)

• display:table-cell;
  อีกหนึ่งที่คุณจะมีปัญหากับความเข้ากันได้เบราว์เซอร์ IE ที่เก่ากว่าจะไม่ทำงานกับสิ่งนี้เลย แต่สำหรับเบราว์เซอร์อื่น ๆ มันก็คุ้มค่าที่table-cellจะสังเกตได้ว่ามันถูกออกแบบมาเพื่อใช้ในบริบทขององค์ประกอบภายในที่มีสไตล์tableและtable-row; การใช้table-cellการแยกเป็นวิธีที่ไม่ควรทำดังนั้นคุณอาจพบกับเบราว์เซอร์ที่แตกต่างกัน

เทคนิคอื่น ๆ ที่คุณอาจพลาด? ใช่.

• เมื่อคุณพูดแบบนี้มีไว้สำหรับเค้าโครงหลายคอลัมน์จึงมีคุณสมบัติ CSS Columnsที่คุณอาจต้องการทราบ อย่างไรก็ตามมันไม่ได้เป็นคุณสมบัติที่รองรับมากที่สุด (ไม่รองรับโดย IE แม้ใน IE9 และคำนำหน้าผู้ขายที่เบราว์เซอร์อื่น ๆ ต้องการทั้งหมด) ดังนั้นคุณอาจไม่ต้องการใช้มัน แต่มันเป็นอีกทางเลือกหนึ่งและคุณก็ถาม

• นอกจากนี้ยังมีคุณสมบัติ CSS FlexBox ซึ่งมีวัตถุประสงค์เพื่อให้คุณสามารถส่งข้อความจากกล่องหนึ่งไปอีกกล่องหนึ่ง มันเป็นคุณสมบัติที่น่าตื่นเต้นที่จะช่วยให้รูปแบบที่ซับซ้อนบางอย่าง แต่ยังคงอยู่ในการพัฒนาอย่างมาก - ดูhttp://html5please.com/#flexbox

หวังว่าจะช่วย

ฉันมักจะใช้float: left;และเพิ่มoverflow: auto;เพื่อแก้ไขปัญหาหลักของการยุบ (เป็นสาเหตุว่าทำไมงานนี้ถึงoverflow: autoจะขยายพาเรนต์แทนที่จะเพิ่มแถบเลื่อนถ้าคุณไม่ให้ความสูงชัดเจนoverflow: hiddenทำงานได้ดีเช่นกัน) ความต้องการการจัดตำแหน่งแนวตั้งส่วนใหญ่ที่ฉันมีสำหรับข้อความหนึ่งบรรทัดในแถบเมนูซึ่งสามารถแก้ไขได้โดยใช้line-heightคุณสมบัติ ถ้าฉันต้องการจัดเรียงองค์ประกอบบล็อกในแนวตั้งจริง ๆ ฉันจะตั้งค่าความสูงอย่างชัดเจนบนพาเรนต์และรายการที่จัดเรียงตามแนวตั้งตำแหน่งสัมบูรณ์สูงสุด 50% และระยะขอบติดลบ

เหตุผลที่ฉันไม่ได้ใช้display: table-cellเป็นวิธีที่ล้นเมื่อคุณมีรายการมากกว่าความกว้างของไซต์ที่สามารถจัดการได้ เซลล์ตารางจะบังคับให้ผู้ใช้เลื่อนตามแนวนอนในขณะที่ลอยตัวจะตัดเมนูโอเวอร์โฟลว์ทำให้สามารถใช้งานได้โดยไม่ต้องเลื่อนในแนวนอน

สิ่งที่ดีที่สุดเกี่ยวกับ float: left และ overflow: auto คือมันทำงานได้ตลอดเวลาจนถึง IE6 โดยไม่ต้องแฮ็ค

ฉันจะบอกว่ามันขึ้นอยู่กับสิ่งที่คุณต้องการสำหรับ:

1. หากคุณจำเป็นต้องใช้มันเพียงเพื่อให้ได้รูปแบบ 3 floatคอลัมน์ผมขอแนะนำให้ไปทำมันด้วย

2. inline-blockหากคุณจำเป็นต้องใช้สำหรับเมนูที่คุณสามารถใช้ สำหรับปัญหาช่องว่างคุณสามารถใช้เทคนิคเล็กน้อยตามที่อธิบายไว้โดยคริส Coyier นี่http://css-tricks.com/fighting-the-space-between-inline-block-elements/

3. display: tableหากคุณต้องการที่จะทำให้ตัวเลือกหลายทางเลือกที่ตอบสนองความต้องการความกว้างของการแพร่กระจายอย่างสม่ำเสมอภายในกล่องระบุแล้วฉันไม่ต้องการ สิ่งนี้จะทำงานไม่ถูกต้องในบางเบราว์เซอร์ดังนั้นมันขึ้นอยู่กับการสนับสนุนเบราว์เซอร์ของคุณ

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

ฉันชอบแบบอินไลน์บล็อกแม้ว่าการลอยยังมีประโยชน์ Table-cell แสดงผลไม่ถูกต้องโดย IE เก่า ๆ (ไม่มี inline-block แต่มีzoom: 1; *display: inlineแฮ็คที่ฉันใช้บ่อย) หากคุณมีลูกที่มีความสูงน้อยกว่าพ่อแม่ลอยจะพาพวกเขาขึ้นไปด้านบนในขณะที่บล็อกแบบอินไลน์จะทำให้บางครั้ง

ส่วนใหญ่แล้วเบราว์เซอร์จะตีความทุกอย่างถูกต้องเว้นแต่ว่าเป็นของ IE คุณต้องตรวจสอบเสมอเพื่อให้แน่ใจว่า IE ไม่ดูดเช่นแนวคิดของตารางเซลล์

ในความเป็นจริงทั้งหมดใช่มันเดือดลงไปที่การตั้งค่าส่วนตัว

เทคนิคหนึ่งที่คุณสามารถใช้เพื่อกำจัดพื้นที่สีขาวคือการตั้งค่าfont-size0 ให้กับผู้ปกครองจากนั้นให้font-sizeกลับไปที่เด็ก ๆ แม้ว่ามันจะเป็นเรื่องยุ่งยากและแย่

สำหรับบันทึกเท่านั้นเมื่อต้องการเพิ่มในคำตอบของ Spudley มีความเป็นไปได้ที่จะใช้position: absoluteและระยะขอบถ้าคุณทราบความกว้างของคอลัมน์

สำหรับฉันปัญหาหลักที่ทำให้การสลักเป็นวิธีคือการที่คุณต้องการคอลัมน์เพื่อเติมเต็มความสูงทั้งหมด (ความสูงเท่ากัน) ที่เซลล์ตารางเป็นวิธีที่ง่ายที่สุด (ถ้าคุณไม่สนใจเบราว์เซอร์รุ่นเก่า)

ฉันชอบinline-blockแต่floatก็ยังเป็นวิธีที่มีประโยชน์ในการรวบรวม HTML elemenets โดยเฉพาะอย่างยิ่งเมื่อเรามีองค์ประกอบที่หนึ่งควรติดไปทางซ้ายและขวาหนึ่งลอยทำงานได้ดีขึ้นด้วยการเขียนบรรทัดน้อยลงในขณะที่บล็อกแบบอินไลน์ทำงานได้ดีในหลายกรณี .