วิธีการวางภาพด้านซ้ายของข้อความบนเว็บเพจ

ใช้ CSS เพื่อจัดแนวภาพไปทางด้านซ้ายของเค้าโครงเว็บเพจ

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

ความสามารถในการทำให้ข้อความและภาพเหล่านั้นทำงานได้ดีเป็นสิ่งที่ทำให้นักออกแบบเว็บยอดเยี่ยมเป็นอย่างมาก! คุณไม่เพียง แต่ต้องการให้ข้อความและรูปภาพของคุณปรากฏขึ้นทีละภาพซึ่งเป็น องค์ประกอบหลักขององค์ประกอบระดับบล็อก เหล่านี้โดยค่าเริ่มต้น ไม่คุณต้องการการควบคุมวิธีการที่ข้อความและภาพไหลไปด้วยกันในสิ่งที่จะเป็นภาพลักษณ์ของเว็บไซต์ของคุณ

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

เริ่มต้นด้วย HTML

สิ่งแรกที่คุณต้องทำก็คือมี HTML ที่จะใช้งานได้ ตัวอย่างเช่นเราจะเขียนย่อหน้าและเพิ่มภาพตอนต้นของย่อหน้า (ก่อนข้อความ แต่หลังจากแท็กเปิด

) นี่คือสิ่งที่ HTML มาร์กอัปดูเหมือนว่า:

ข้อความของย่อหน้าไปที่นี่ ในตัวอย่างนี้เรามีภาพของภาพ headshot ดังนั้นข้อความนี้อาจเป็นเรื่องเกี่ยวกับคนที่ headshot เป็น

ตามค่าเริ่มต้นหน้าเว็บของเราจะปรากฏพร้อมกับภาพด้านบนของข้อความ เนื่องจากภาพเป็นองค์ประกอบระดับบล็อกใน HTML ซึ่งหมายความว่าเบราว์เซอร์จะแสดงตัวแบ่งบรรทัดก่อนและหลังองค์ประกอบรูปภาพตามค่าเริ่มต้น เราจะเปลี่ยนรูปลักษณ์เริ่มต้นนี้โดยเปลี่ยนเป็น CSS อันดับแรกเราจะเพิ่ม ค่าของคลาสลงในอิลิเมนต์รูปภาพของเรา ชั้นเรียนดังกล่าวจะทำหน้าที่เป็น "เบ็ด" ที่เราจะใช้ใน CSS ของเราในภายหลัง

ข้อความของย่อหน้าไปที่นี่ ในตัวอย่างนี้เรามีภาพของภาพ headshot ดังนั้นข้อความนี้อาจเป็นเรื่องเกี่ยวกับคนที่ headshot เป็น

โปรดสังเกตว่าชั้นของ "ซ้าย" ไม่ทำอะไรเลยด้วยตัวเอง! เพื่อให้เราบรรลุรูปแบบที่ต้องการเราจำเป็นต้องใช้ CSS ต่อไป

สไตล์ CSS

ด้วย HTML ของเราในสถานที่รวมถึงแอตทริบิวต์ class ของ "left" เราสามารถเปลี่ยนเป็น CSS ได้แล้ว เราจะเพิ่มกฎลงใน สไตล์ชีต ของเราซึ่งจะลอยรูปภาพนั้นและเพิ่มช่องว่างเล็ก ๆ ด้านข้างเพื่อให้ข้อความที่ห่อหุ้มไว้รอบ ๆ ภาพจะไม่กระทบกับภาพอย่างใกล้ชิดเกินไป นี่คือ CSS ที่คุณอาจเขียน:

.left {float: ซ้าย; padding: 0 20px 20px 0; }

สไตล์นี้จะลอยภาพไปทางซ้ายและเพิ่ม ช่องว่าง เล็กน้อย (ใช้ชวเลข CSS บางส่วน) ทางด้านขวาและด้านล่างของภาพ

หากคุณตรวจสอบหน้าเว็บที่มี HTML นี้ในเบราว์เซอร์ภาพจะถูกจัดชิดกับด้านซ้ายและข้อความของย่อหน้าจะปรากฏทางด้านขวาด้วยระยะห่างที่เหมาะสมระหว่างทั้งสอง โปรดสังเกตว่าค่าของ "ซ้าย" ของชั้นเรียนที่เราใช้คือ arbitrary เราอาจเรียกได้ว่าอะไรเพราะคำว่า "ซ้าย" ไม่ทำอะไรเลยด้วยตัวเอง จำเป็นต้อง มีแอตทริบิวต์ class ใน HTML ที่ทำงานกับสไตล์ CSS จริงที่กำหนดการเปลี่ยนแปลงภาพที่คุณต้องการทำ

ทางเลือกเพื่อให้บรรลุลักษณะเหล่านี้

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