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

{{{1}}}

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

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

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

วิธีใช้

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

{{กล่องลอย
<!-- ข้อความ -->
| 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.