เรียนรู้วิธีห่อข้อความรอบ ๆ รูปภาพลอยด้วย CSS
ในการทำให้ข้อความของคุณล้อมรอบรูปภาพทางด้านขวา คล้ายกับในรูปภาพที่แนะนำบทความนี้ ให้ใช้กฎ CSS ดังนี้:
กฎ float: left ทำให้รูปภาพย้ายไปที่ระยะขอบด้านซ้าย กฎ padding-right ป้องกันไม่ให้ข้อความชนกับด้านขวาของรูปภาพ หากมีการเพิ่มเส้นขอบให้กับรูปภาพนี้ ช่องว่างภายในจะอยู่ระหว่างรูปภาพและเส้นขอบ ดูส่วนที่ 2 เพื่อทำงานกับรูปภาพที่มีเส้นขอบ
ถัดไป เพิ่มระยะขอบด้านซ้ายและด้านขวาของรูปภาพเพื่อจัดกึ่งกลาง ค่าที่เหมาะสมสำหรับระยะขอบด้านซ้ายและขวาเพื่อจัดกึ่งกลางทุกสิ่งนั้นเป็นค่าอัตโนมัติ
ในการสร้างเส้นขอบที่หนาเหมือนกรอบโดยใช้ลักษณะเส้นขอบแบบร่อง คุณสามารถใช้กฎลักษณะนี้:
รูปแบบเส้นขอบอื่นๆ ได้แก่ สีทึบ จุด เส้นประ คู่ สัน ส่วนที่ใส่เข้าไป และจุดเริ่มต้น ความกว้างสามารถแสดงเป็นพิกเซล, ems หรือเปอร์เซ็นต์
สามารถเลือกเส้นขอบที่ด้านบน ด้านขวา ด้านล่าง และด้านซ้ายของรูปภาพได้ คุณสามารถใช้ความรู้นี้เพื่อสร้างเอฟเฟกต์เหมือนเงาตกกระทบ
การใช้เส้นขอบทึบในสีเทา 2 เฉดที่ขอบด้านขวาและด้านล่าง คุณจะได้เอฟเฟกต์เงาตกกระทบ
img { ลอย: ซ้าย; border-right-style: แข็ง; border-right-width: 8px; border-right-color: #CCCCCC; ขอบล่างสไตล์: แข็ง; ขอบล่างกว้าง: 8px; ขอบล่าง-สี: #999999; ระยะขอบขวา: 1em; ระยะขอบล่าง: 1em; }
เคล็ดลับ
หากคุณมีรูปภาพมากกว่าหนึ่งหมวด (div) ของหน้า ให้ใช้ตัวเลือกลูกหลานเพื่อจัดรูปแบบแต่ละหน้า ตัวเลือกที่เป็นไปได้: #content img, #sidebar img, #feature img
