CSS: two-column ​

div[class~="instui-two-column"] — เค้าโครงสองคอลัมน์โดยมีส่วนเนื้อหาด้านซ้ายและด้านขวา.

✅ ใช้ Two-Column เมื่อ:

  • คุณมีพื้นที่เนื้อหา 2 ส่วนที่มีความสำคัญใกล้เคียงกัน

  • การเปรียบเทียบหรือเทียบข้างเนื้อหาสองชุดเคียงกัน

  • สร้างเลย์เอาต์ที่ตอบสนองและเรียงซ้อนบนมือถือ 🚫 อย่าใช้ Two-Column เมื่อ:

  • คอลัมน์หนึ่งมีความเด่นหลักบนหน้า — ให้ใช้เลย์เอาต์ไม่สมมาตรแทน

  • เนื้อหาไม่ได้รับประโยชน์จากการแสดงเคียงข้าง

การเข้าถึง ​

  • ตรวจสอบให้แน่ใจว่าทั้งสองคอลัมน์มองเห็นและใช้งานได้บนหน้าจอแคบ
  • ใช้เครื่องหมายเชิงความหมาย (เช่น <section>) ห่อหุ้มเนื้อหาคอลัมน์
  • รักษาช่องว่างและความคอนทราสต์ระหว่างคอลัมน์ให้เพียงพอ

การใช้งาน ​

css
@import "@pantoken/plugin-layouts/layouts.css";

ส่วนประกอบ ​

ส่วนคำอธิบาย
.instui-dividerเส้นกั้นเชิงภาพ (ไม่บังคับ) ระหว่างคอลัมน์.
.instui-leftพื้นที่เนื้อหาคอลัมน์ซ้าย.
.instui-rightพื้นที่เนื้อหาคอลัมน์ขวา.

สถานะ ​

สถานะคำอธิบาย
:optional—

เงื่อนไข ​

ชนิดการค้นหาคำอธิบาย
media(max-width: 768px)—

โทเค็นที่ใช้ ​

Tokenชนิดค่า
--instui-color-border——
--instui-space-large——
--instui-space-medium——

ที่เกี่ยวข้อง ​