ความเข้ากันได้ของเบราว์เซอร์เป็นปัญหาที่พบบ่อยในเค้าโครง CSS และผู้เริ่มต้นก็มีความเข้าใจผิดมากมาย
สองวิธีนี้มีข้อดีดังต่อไปนี้:
1. ไม่จำเป็นต้องใช้แฮ็ค
2. ง่ายและมีประสิทธิภาพคุณสามารถทำได้อย่างรวดเร็ว
3. รูปแบบลำดับชั้นและแบบแยกส่วน
4. รหัสมีความสมเหตุสมผลและง่ายกว่าในการระบุ
วิธีที่ 1: แก้ปัญหาการวางแนวลอยที่เกิดจากการเพิ่มระยะห่างภายในและภายนอก
เรามักจะต้องใช้ Float เพื่อลอยเมื่อรูปแบบหลายคอลัมน์
เพื่อให้ได้เอฟเฟกต์นี้เราจะเพิ่มระยะขอบเพื่อให้คอลัมน์โดยตรงจากระยะไกลและเพิ่มเส้นขอบรวมถึงช่องว่างภายในเพื่อให้ข้อความภายในจะไม่ใกล้กับเฟรม แต่สถานการณ์ที่ไม่คาดคิดเกิดขึ้น
ในคอลัมน์ที่สามวิ่งไปที่ด้านล่าง นี่ไม่ใช่เอฟเฟกต์ที่คุณต้องการ จากนั้นมาวิเคราะห์กันเถอะ ทำตามแนวคิดทั่วไป ความกว้างโดยรวมคือ 800px คอลัมน์ด้านซ้ายคือ 200, กลาง 400 และคอลัมน์ด้านขวาคือ 200 ซึ่งดูดี แต่จะต้องมีระยะห่างระหว่างคอลัมน์เหล่านี้ดังนั้นคุณต้องเปลี่ยน: คอลัมน์ซ้าย 190, กลาง 400, และคอลัมน์ขวา 190. ตกลงหรือไม่?
แต่เพื่อประโยชน์ของรูปลักษณ์ที่ดีคุณได้เพิ่มพรมแดน อย่างไรก็ตามเฟรมจะเพิ่มความกว้างหลังจากลืมชายแดน 168 เพื่อไม่ให้สอดคล้องกัน แต่คุณไม่พบว่ามันซับซ้อนหรือไม่? จะมีความแตกต่างในการแสดงเบราว์เซอร์สำหรับเค้าโครงนี้
โอเคให้ฉันบอกวิธีการของฉัน ตามลำดับชั้นฉันแยกเลย์เอาต์และจอแสดงผล เลย์เอาต์หมายถึงการเพิ่มระยะห่างด้านนอกส่วนใหญ่นอกเหนือจากความกว้างและการลอยดังนั้นมันจะง่ายขึ้นสำหรับฉันในการคำนวณ จากนั้นเราเพิ่ม div ในคอลัมน์ของเค้าโครงเพื่อแสดงเส้นขอบระยะห่างภายในและภายนอก ฯลฯ คุณไม่จำเป็นต้องกำหนดความกว้างคุณสามารถปรับได้ เพื่ออำนวยความสะดวกในความทรงจำของคุณฉันชั่วคราวบทกวี: ความกว้างคงที่ควรลอยโดยไม่มีพรมแดนหรือแพทช์ใส่ div ข้างในและกำหนดสไตล์การทำงาน!
วิธีที่ 2: แก้องค์ประกอบลอยภายในจากชั้นนอก
เพื่อสร้างแคตตาล็อกผลิตภัณฑ์หรืออัลบั้มรูปภาพเราใช้ UL หรือ N Divs เพื่อลอย
แต่สิ่งต่าง ๆ ขัดกับความคาดหวังของฉันเมื่อเร็ว ๆ นี้
การแก้ปัญหานี้เป็นเรื่องง่ายมาก
1. คุณสามารถเพิ่มลอย: ซ้าย;
2. วิธีอื่นคือการวาง div เพื่อล้างการลอยตัวในตอนท้ายหลังจากการลอยสิ้นสุดลง
3. เพิ่มความสูงหรือความกว้างให้กับชั้นนอก