การจัดเตรียมรูปแบบ CSS - การเลื่อนและล้าง

การจัดเตรียมรูปแบบ CSS - การเลื่อนและล้าง

property นี้กำหนดวิธีที่องค์ประกอบจะลอย ใช้งานง่ายที่สุดคือ คอร์สที่แนะนำ

property นี้กำหนดวิธีที่องค์ประกอบจะลอย CSS clear

property นี้กำหนดองค์ประกอบใดที่สามารถลอยข้างองค์ประกอบที่ถูกล้างและในด้านใด

ใช้งานง่ายที่สุดคือ float property

ใช้งานง่ายที่สุดคือ property นี้ใช้เพื่อจัดตำแหน่งและจัดรูปแบบของสิ่งเกี่ยวข้อง ตัวอย่างเช่น ทำให้รูปภาพลอยอยู่ทางซ้ายไปที่ข้อความในต容器的

  • องค์ประกอบที่สามารถตั้งค่าค่าดังนี้
  • left - องค์ประกอบจะลอยไปทางด้านซ้ายของต容器的
  • right - องค์ประกอบจะลอยที่ด้านขวาของต容器的
  • none - องค์ประกอบจะไม่ลอย (จะแสดงที่ตำแหน่งที่ปรากฏของมันในข้อความ) ค่าเริ่มต้น

inherit - องค์ประกอบจะทบทวนค่า float ของพ่อของมันใช้งานง่ายที่สุดคือ float

属性ที่สามารถนำไปใช้ (บนหนังสือพิมพ์) สร้างผลที่ข้อความรอบรูปภาพ

ตัวอย่าง - float: right;

มะนาว

วิชาการเทคโนโลยีเว็บต้นโต่ง - ทั้งหมดฟรี ใน CodeW3C.com คุณสามารถหาทุกๆ วิชาการเรียนการสอนที่คุณต้องการสำหรับการสร้างเว็บไซต์ จากพื้นฐาน HTML จนถึง CSS และยังเข้าสู่ระดับที่สูงขึ้นอย่างเช่น XML, SQL, JS, PHP

คู่มือของเราครอบคลุมทุกๆ ด้านของเทคโนโลยีเว็บไซต์ ซึ่งรวมถึงมาตรฐาน W3C อย่างเช่น HTML, CSS, XML และเทคโนโลยีอื่นๆ เช่น JavaScript, PHP, SQL และอื่นๆ

ใน CodeW3C.com พวกเรามีหลายพันตัวอย่าง ด้วยการใช้แก้ไขเนื้อหาของเราคุณสามารถแก้ไขตัวอย่างเหล่านี้และทดสอบรหัส

ตัวอย่าง

img {
  ตัวอย่าง - กำหนด float: right; ให้รูปภาพลอยอยู่ทางขวาของข้อความ
}

ทดลองเอง

float: right;

ตัวอย่าง - กำหนด float: left;ไปทางซ้ายการเลื่อน

มะนาว

วิชาการเทคโนโลยีเว็บต้นโต่ง - ทั้งหมดฟรี ใน CodeW3C.com คุณสามารถหาทุกๆ วิชาการเรียนการสอนที่คุณต้องการสำหรับการสร้างเว็บไซต์ จากพื้นฐาน HTML จนถึง CSS และยังเข้าสู่ระดับที่สูงขึ้นอย่างเช่น XML, SQL, JS, PHP

คู่มือของเราครอบคลุมทุกๆ ด้านของเทคโนโลยีเว็บไซต์ ซึ่งรวมถึงมาตรฐาน W3C อย่างเช่น HTML, CSS, XML และเทคโนโลยีอื่นๆ เช่น JavaScript, PHP, SQL และอื่นๆ

ใน CodeW3C.com พวกเรามีหลายพันตัวอย่าง ด้วยการใช้แก้ไขเนื้อหาของเราคุณสามารถแก้ไขตัวอย่างเหล่านี้และทดสอบรหัส

ตัวอย่าง

img {
  float: left;
}

ทดลองเอง

ตัวอย่าง - ไม่มี float

ในตัวอย่างนี้ รูปภาพจะแสดงที่ตำแหน่งที่รูปภาพได้ปรากฏขึ้นในข้อความ (float: none;):

มะนาว วิชาการเทคโนโลยีเว็บต้นโต่ง - ทั้งหมดฟรี ใน CodeW3C.com คุณสามารถหาทุกๆ วิชาการเรียนการสอนที่คุณต้องการสำหรับการสร้างเว็บไซต์ จากพื้นฐาน HTML จนถึง CSS และยังเข้าสู่ระดับที่สูงขึ้นอย่างเช่น XML, SQL, JS, PHP คู่มือของเราครอบคลุมทุกๆ ด้านของเทคโนโลยีเว็บไซต์ ซึ่งรวมถึงมาตรฐาน W3C อย่างเช่น HTML, CSS, XML และเทคโนโลยีอื่นๆ เช่น JavaScript, PHP, SQL และอื่นๆ ใน CodeW3C.com พวกเรามีหลายพันตัวอย่าง ด้วยการใช้แก้ไขเนื้อหาของเราคุณสามารถแก้ไขตัวอย่างเหล่านี้และทดสอบรหัส

ตัวอย่าง

img {
  float: none;
}

ทดลองเอง

การอ่านเพิ่มเติม

หนังสือเพิ่มเติม:CSS การเลื่อน