ในกระบวนการพัฒนาตามปกติเรามักจะต้องใช้รูปภาพหลายภาพ
<! ขอบด้านล่าง: 1px Solid Red;} ul {Border: 1px Solid Blue; img src = lipeng.png> </li></ul> </body> </html>แต่ในเวลานี้เราพบปัญหาทำไมจึงมีเส้นพิเศษภายใต้รูปภาพของฉัน?
เกิดอะไรขึ้น?
ฉันไม่ได้ล้างเส้นขอบด้านนอกและด้านในระหว่าง IMG หรือไม่?
อันที่จริงนี่เป็นผีที่มีองค์ประกอบแบบอินไลน์
องค์ประกอบที่มองเห็นได้ซึ่งไม่ใช่องค์ประกอบระดับบล็อกเป็นองค์ประกอบที่เกี่ยวข้องภายในและลักษณะของประสิทธิภาพของมันคือรูปแบบของการจัดวางบรรทัด ---- "คู่มือการอนุญาต CSS"ความหมายคืออะไร?
ซึ่งหมายความว่าในความเป็นจริงเช่นข้อความรูปภาพและองค์ประกอบการเชื่อมโยงภายในอื่น ๆ มันสอดคล้องกับพื้นฐานของผู้ปกครอง แต่คุณอยู่ในแนวเดียวกันกับพื้นฐาน
เนื่องจากเรารู้เหตุผลของปัญหานี้จึงง่ายกว่ามากที่จะแก้ปัญหา
1. ทางออกแรกเนื่องจากเป็นองค์ประกอบอินไลน์ปัญหานี้สามารถแก้ปัญหานี้ได้อย่างง่ายดายและหยาบคายนั่นคือการเปลี่ยนองค์ประกอบของเราให้เป็นบุคลิกภาพส่วนตัวสามารถเปลี่ยนจากอินไลน์เป็นบล็อกได้หรือไม่?
<style type = text/css> img {ความสูง: 200px; : 0; 2. ทางออกที่สองมันหยาบเกินไปเพศจะเปลี่ยนไปเราจะเล่นได้อย่างไรอย่างมีความสุขดังนั้นเราต้องลองโค้งเพื่อบันทึกไว้
<style type = text/css> img {ความสูง: 200px; ;จะเห็นได้ว่าสิ่งนี้สามารถบรรลุผลลัพธ์ที่ต้องการ
เหตุผลก็คือแอตทริบิวต์เริ่มต้นของการจัดแนวแนวตั้งคือพื้นฐาน
3. ทางออกที่สามแต่วิธีการจัดตำแหน่งได้รับการแก้ไขดังนั้นมันอาจทำให้เกิดปัญหาได้ ตอนนี้คุณไม่ได้อยู่ในเอกสารปัจจุบันอีกต่อไปคุณจะไม่ได้รับการจัดเรียงตามข้อความนี้เมื่อคุณจัดวาง
เราสามารถใช้ลอยได้
<style type = text/css> img {ความสูง: 200px; สีน้ำเงิน;นอกจากนี้ยังสามารถแก้ปัญหานี้ได้ แต่โปรดทราบว่าแม้ว่าการลอยตัวจะดี แต่ก็ไม่โลภ
คุณจะต้องสามารถแก้ปัญหาผลกระทบของการลอยตัวได้อย่างถูกต้องและหากคุณวางแผนที่จะทำผลกระทบของข้อความรอบทิศทางจากนั้นการใช้ลอยจะต้องเป็นตัวเลือกที่ดีที่สุดของคุณ
4. โซลูชันที่สี่หากแผนการทั้งหมดข้างต้นไม่สามารถแก้ปัญหาของคุณได้เพียงการฆ่าครั้งใหญ่ของฉันเท่านั้นที่เสียสละ
คุณสามารถให้องค์ประกอบหลักของคุณในการตั้งค่าขนาดข้อความเป็น 0
<style type = text/css> img {ความสูง: 200px; รายการ -stedyle: ไม่มี;เนื่องจากคุณอยู่ในแนวเดียวกันตามพื้นฐานของข้อความฉันจะตั้งข้อความโดยตรงเพื่อให้คุณไม่สามารถจัดตำแหน่งได้ แต่วิธีการนี้จะแนะนำเฉพาะเมื่อคุณรีบใช้
สรุปข้างต้นเป็นวิธีแก้ปัญหาสี่ประการสำหรับปัญหานี้ หากคุณมีคำถามใด ๆ คุณสามารถฝากข้อความไว้เพื่อสื่อสาร