ข้ามไปเนื้อหา

แม่แบบ:กล่องลอย

จาก วิกิซอร์ซ

{{{1}}}

Documentation icon คู่มือการใช้งานแม่แบบ[ดู] [แก้] [ประวัติ] [ล้างแคช]

วัตถุประสงค์

[แก้ไข]

แม่แบบนี้ใช้สร้างกลุ่มข้อความที่ลอยอยู่ด้านหนึ่ง ๆ

วิธีใช้

[แก้ไข]

ใช้โค้ดดังนี้

{{กล่องลอย
<!-- ข้อความ -->
| text = 
| fontsize = 
| align = 
| style = 

<!-- กล่อง -->
| side = 
| border = 
| width = 
}}

คำอธิบาย

[แก้ไข]
ช่อง คำอธิบาย
text ใส่ข้อความ
font-size ใส่ขนาดอักษรที่ต้องการ (เช่น "120%" หรือ "80%") ขนาดอัตโนมัติ คือ "100%"
align แนวข้อความ ใส่ "left", "center", หรือ "right" แนวอัตโนมัติ คือ "left"
style แบบข้อความ เช่น "italic" สำหรับตัวเอียง หรือ "bold" สำหรับตัวหนา แบบอัตโนมัติ คือ ตัวปรกติ
side ด้านที่กล่องจะลอย ใส่ว่า "left" หรือ "right" เป็นต้น ด้านอัตโนมัติ คือ "left"
border ใส่รหัสแบบ CSS ถ้าต้องการจัดรูปแบบขอบของกล่อง เช่น "border:1px solid;" แบบอัตโนมัติ คือ ไม่จัดอะไร
width ใส่ความกว้างของกล่องตามต้องการ ความกว้างอัตโนมัติ คือ "7em"

ตัวอย่าง

[แก้ไข]

ตัวอย่างที่ 1

[แก้ไข]
{{กล่องลอย|Normal float left}}{{lorem ipsum}}{{lorem ipsum}}

Normal float leftLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

ตัวอย่างที่ 2

[แก้ไข]
{{กล่องลอย|Float text right|side=right}}{{lorem ipsum}}

Float text rightLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

ตัวอย่างที่ 3

[แก้ไข]
{{กล่องลอย|Float text right border|side=right|border=border:1px solid;}}{{lorem ipsum}}

Float text right borderLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.