ในบทความนี้ เราจะพูดถึงแต่ละวิธีที่กล่าวถึงทีละวิธี และให้ตัวอย่างที่เหมาะสมของแต่ละวิธี
เริ่มกันเลย!
วิธีที่ 1: วาง Divs สองอันเคียงข้างกันใน CSS โดยใช้ grid
ซีเอสเอส “ กริด เลย์เอาต์ ” อนุญาตให้ผู้ใช้วาง div สอง divs เคียงข้างกัน โดยพื้นฐานแล้ว กริดคือค่าของคุณสมบัติการแสดงผลที่ใช้ในการสร้างเลย์เอาต์ที่ประกอบด้วยแถวและคอลัมน์
ไวยากรณ์
ไวยากรณ์ของคุณสมบัติการแสดงผลพร้อมเค้าโครงกริดแสดงไว้ด้านล่าง:
จอแสดงผล: กริด
ตอนนี้ มาดูตัวอย่างที่เกี่ยวข้องกับการวางสอง div เคียงข้างกันใน CSS โดยใช้เค้าโครงกริด
ตัวอย่าง
ที่นี่ เราจะสร้าง div ย่อยสอง div ภายใน div parent โดยมีชื่อคลาสเป็น ' พ่อแม่ ”, “ เด็ก ' และ ' เด็ก ”:
< div ระดับ = 'พ่อแม่' >< div ระดับ = 'เด็ก' >< / div >
< div ระดับ = 'เด็ก' >< / div >
< / div >
ถัดไปในส่วน CSS ให้ใช้ “ .พ่อแม่ ” เพื่อเข้าถึง div parent และตั้งค่าของคุณสมบัติการแสดงผลเป็น “ กริด ” ต่อไป กำหนดเศษส่วนโดยใช้ “ ตารางเทมเพลตคอลัมน์ ” คุณสมบัติเพื่อสร้างพื้นที่สำหรับคอลัมน์ ในกรณีของเรา เราจะตั้งเศษส่วนเป็น “ 1fr ' และ ' 1fr ” ซึ่งหมายความว่าทั้งสอง div ได้รับพื้นที่เท่ากัน นอกจากนี้ เราจะกำหนดช่องว่างระหว่างสองคอลัมน์โดยใช้คุณสมบัติ column-gap และตั้งค่าเป็น “ 25px ”
ซีเอสเอส:
.พ่อแม่ {แสดง : กริด ;
ตารางเทมเพลตคอลัมน์ : 1fr 1fr ;
คอลัมน์ช่องว่าง : 25px ;
}
ในขั้นตอนต่อไป เราใช้ “ .เด็ก ” เพื่อเข้าถึงทั้ง div ลูกและตั้งค่าความสูงของ div เป็น “ 250px ” และกำหนดสีพื้นหลังเป็น “ rgb(253, 5, 109) ”:
.เด็ก {ความสูง : 250px ;
พื้นหลัง : rgb ( 253 , 5 , 109 ) ;
}
ซึ่งจะแสดงผลดังต่อไปนี้:
ย้ายไปที่วิธีอื่นเพื่อวาง div เคียงข้างกัน
วิธีที่ 2: วาง Divs สองอันเคียงข้างกันใน CSS โดยใช้ flex
“ flex ” คือค่าของคุณสมบัติการแสดงผลที่อนุญาตให้วางสอง div เคียงข้างกัน คุณสมบัตินี้ใช้เพื่อกำหนดความยาวที่ยืดหยุ่นได้สำหรับสินค้าที่ยืดหยุ่นได้ มันย่อหรือขยายรายการดิ้นให้พอดีกับภาชนะ
ไวยากรณ์
ไวยากรณ์ของคุณสมบัติการแสดงผลด้วย flex แสดงไว้ด้านล่าง:
จอแสดงผล: ดิ้น;มาดูตัวอย่างเพื่อทำความเข้าใจแนวคิดที่ระบุไว้
ตัวอย่าง
เราจะพิจารณาไฟล์ HTML เดียวกันและใช้ “ flex ” ไปยังคอนเทนเนอร์หลัก ที่นี่ เราจะตั้งค่าของคุณสมบัติการแสดงผลเป็น flex และตั้งค่าช่องว่างระหว่าง div ย่อยเป็น ' 10px ”:
.พ่อแม่ {แสดง : flex ;
ช่องว่าง : 10px ;
}
หลังจากนั้น กำหนดความกว้าง ความสูง และสีพื้นหลังของ div เป็น “ 650px ”, “ 200px ', และ “rgb(0, 255, 42) ” ตามลำดับ:
.เด็ก {ความกว้าง : 650px ;
ความสูง : 200px ;
พื้นหลัง : rgb ( 0 , 255 , 42 ) ;
}
ผลลัพธ์ของรหัสที่ระบุได้รับด้านล่าง:
วิธีที่ 3: วาง Divs สองอันเคียงข้างกันใน CSS โดยใช้ float
คุณสมบัติ CSS float ระบุทิศทางลอยตัวขององค์ประกอบ โดยเฉพาะอย่างยิ่ง คุณสมบัตินี้สามารถใช้เพื่อวาง div สองอันเคียงข้างกันใน CSS
ไวยากรณ์
ไวยากรณ์ของคุณสมบัติ float คือ:
ลอย: ไม่มี|ซ้าย|ขวานี่คือคำอธิบายสำหรับค่าที่ระบุข้างต้น:
- ไม่มี: ใช้เพื่อจำกัดการลอยตัว
- ซ้าย: ใช้สำหรับลอยองค์ประกอบทางด้านซ้าย
- ขวา: ใช้สำหรับลอยองค์ประกอบทางด้านขวา
มาดูตัวอย่างการวาง div เคียงข้างกัน
ตัวอย่าง
ตอนนี้ เราจะสร้างสอง divs ภายในแท็ก
และกำหนดชื่อคลาสเป็น “ div1 ' และ ' div2 ”: < ร่างกาย >< div ระดับ = 'ดิวิชั่น1' >< / div >
< div ระดับ = 'ดิวิชั่น2' >< / div >
< / ร่างกาย >
จากนั้นใช้ “ .div1 ' และ ' .div2 ” เพื่อเข้าถึงคอนเทนเนอร์ที่เพิ่มเข้ามาในส่วน HTML เราจะใช้ div ทั้งสองในคลาสเดียวกันเพราะคุณสมบัติและค่าที่เราจะกำหนดให้กับทั้งคู่เหมือนกัน
ต่อไปเราจะกำหนดมูลค่าของคุณสมบัติ float เป็น “ ซ้าย ” และกำหนดความกว้างและความสูงของ div เป็น “ ห้าสิบ% ' และ ' 40% ” นอกจากนี้เรายังใช้คุณสมบัติ box-sizing และตั้งค่าเป็น “ ขอบกล่อง ” นอกจากนี้ ตั้งค่าสีพื้นหลังของ div เป็น “ rgb(7, 255, 222) ” และตั้งค่าคุณสมบัติ border เป็น “ 3px ”, “ แข็ง ', และ ' rgb(255, 0, 255) ”:
.div1 , .div2 {ลอย : ซ้าย ;
ความกว้าง : ห้าสิบ% ;
ความสูง : 40% ;
ขนาดกล่อง : ขอบกล่อง ;
พื้นหลัง : rgb ( 7 , 255 , 222 ) ;
ชายแดน : 3px แข็ง rgb ( 255 , 0 , 255 ) ;
}
บันทึก: คุณสามารถวางสอง divs เคียงข้างกันโดยไม่ต้องใช้คุณสมบัติ box-sizing และคุณสมบัติ border โดยการตั้งค่าสีพื้นหลังที่แตกต่างกันของ divs
เมื่อคุณติดตั้งโค้ดข้างต้นแล้ว ให้รันไฟล์ HTML และดูผลลัพธ์:
บันทึก: ในการสร้างช่องว่างระหว่างสอง div ให้สร้าง div อื่นก่อนแล้วจึงกำหนดระยะขอบของ div ตามลำดับ
บทสรุป
Divs สามารถวางเคียงข้างกันโดยใช้วิธีการที่แตกต่างกันสามวิธีของ CSS ซึ่งก็คือ “ flex ' และ ' กริด ” ค่าของคุณสมบัติการแสดงผลและ “ ลอย ' คุณสมบัติ. แต่ละวิธีทำงานอย่างมีประสิทธิภาพ อย่างไรก็ตาม คุณสามารถใช้สิ่งเหล่านี้ได้ตามความต้องการของเรา ในคู่มือนี้ เราได้พูดถึงสามวิธีในการวาง div เคียงข้างกันโดยใช้ CSS และให้ตัวอย่างที่เกี่ยวข้อง